清华 社 大 系 
网 络 开发 视频 大 讲台 


移动 端 PC 端 同步 学 习 ，QQ 群 / 微 信 群 随时 答疑 。 


速 查 、 高 效 、 实 用 ， 增 强 实战 能 力 。 


先 观 摩 ， 再 临摹 ， 高 手 案头 常备 ， 随 时 查阅 提升 。 


随 用 随 取 ， 提 升 设计 效率 ， 快 速 进 阶 开发 高 手 行列 。 
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前 端 科技 “编著 
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内 容 简 介 

《HTML5 移动 Web 开发 从 入门 到 精通 ( 微 课 精 编 版 )》 结 合 HIML5 和 CSS3 技术 ， 为 读者 全 面 深 入 地 讲解 了 针对 
各 种 屏幕 大 小 设计 和 开发 现代 网 站 的 技术 。 全书 共 19 章 ， 包括 HTMLS 基础 、CSS3 基础 、 设 计 移动 页 面 结构 、 设 计 移 
动 页 面 正 文 、 美 化 页 面 文本 、 设 计 列表 结构 、 应 用 多 媒体 、 使 用 CSS3 定义 版 式 、 使 用 媒体 查询 、 设 计 弹 性 布局 、 设 计 
响应 式 图 片 、 设 计 移动 表单 、 设 计 响应 式 表格 、 使 用 CSS3 修饰 背景 、 使 用 CSS3 美化 界面 样式 、CSS3 动画 、 设 计 响 
应 式 网 站 、 酒 店 预订 微 信 wap 网 站 、 发 布 网 页 等 内 容 。 本 书 各 章节 注重 实例 间 的 联系 和 各 功能 间 的 难 易 层 次 ， 内 容 讲 
解 以 文字 描述 和 图 例 并 重 ， 力 求生 动易 慌 ， 并 对 软件 应 用 过 程 中 的 难点 、 重 点 和 可 能 出 现 的 问题 给 予 详细 讲解 和 提示 。 

除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化 、 全 方位 的 学 习 资源 ， 主 要 内 容 如 下 。 


回 279 节 同 步 教学 微 视频 15000 项 设计 素材 资源 
34 项 拓展 知识 微 阅读 4800 个 前 端 开发 案例 
回 460 个 实例 案例 分 析 48 本 权威 参考 学 习 手册 
回 340 个 在 线 微 练 习 1036 道 企业 面试 真题 


本 书 内 容 翔实 、 结 构 清 晰 、 循 序 渐进 ， 基 础 知识 与 案例 实战 紧密 结合 ， 既 可 作为 HTMLS5 初学 者 的 入 门 教材 ， 也 适 
合 中 高 级 用 户 进一步 学 习 和 参考 。 
本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 的 学 习 资源 ， 帮 助 读者 轻松 掌握 HIML5 移动 Web 开发 技术 ， 从 小 白 快 速 
成 长 为 前 端 开发 高 手 。 


纸 质 书 视频 讲解 拓展 学 习 


手机 端 +PC 端 ， 线 上 线 下 同步 学 习 


1.， 获取 学 习 权限 

学 习 本 书 前 ， 请 先 乔 开 图 书 封底 的 二 维 码 涂 层 ， 使 用 手机 扫描 ， 即 可 获取 本 书 资源 的 学 习 权 限 。 再 扫 
描 正文 章节 对 应 的 4 类 二 维 码 ， 可 以 观看 视频 讲解 ， 阅 读 线 上 资源 ， 查 阅 权 威 参考 资料 和 在 线 练习 提升 ， 
全 程 易 懂 、 好 学 、 高 效 、 实 用 。 


各 开 涂 层 , 扫描 获取 学 习 权 限 


清华 社 证 方 被 信号 
国 


2， 观 看 视频 讲解 
对 于 初学 者 来 说 ， 精 彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入门 ， 轻 松 理解 和 掌握 知识 要 点 。 
本 书 中 大 部 分 案例 都 录制 了 视频 ， 可 以 使 用 手机 在 线 观看 ， 也 可 以 离线 观看 ， 还 可 以 推送 到 计算 机 上 大 屏 


下 载 视频 至 手机 ， 推送 视频 至 邮箱 ， 
离线 流畅 现 看 随时 在 PC 端 现 看 


的 


线 


b> 
3. 拓展 线 上 阅读 


一 本 书 的 厚度 有 限 ,但 掌握 一 门 技 术 却 需要 大 量 的 知识 积累 。 本 书 选择 了 那些 与 学 习 、 
识 点 放 在 书 中 ， 而 将 大 量 的 拓展 性 知识 放 在 云 盘 上 ， 


核心 知 


xie 和 mv 开 疏失 和 m 到 类 和 ( 微 课 精 编 版 ) 


读数 百 页 的 前 端 开发 学 习 资 料 ， 获 取 大 量 的 额外 知识 。 


将 一 页 知识 
拓展 为 两 页 


行 在 线 练习 


为 方便 读者 巩固 基础 知识 ， 


学 习 + 模 仿 + 练习 ， 
打造 超 强 实战 能 力 


5 查阅 权威 参考 资料 
扫描 “权威 参考 ”二 维 码 ， 即 可 跳 转 到 对 应 知 


CE 


x 在 线 阅读 


Er 


前 端 开发 在 浅 别 译 


收藏 到 郎 箱 | | 手机 园 训 机 


[| 


HTML 的 头 开 内 容 特别 多 ， 有 计 对 SEO 的 头 
上 息 。 而 且 各 | 
名 人 国内 浏览 各 厂商 部 有 些 | 


> 头 事 标签 ， 可 以 得 有 效 的 增强 页 面 的 可 用 性 。 


4 


提升 实战 能 力 ， 本 书 附 赠 了 大 量 的 前 端 
练习 ”二 维 码 ， 即 可 通过 反复 的 实 操 训练 加 深 对 知识 的 领悟 程度 。 


7 Er 
x 在 线 练习 
前 端 开 发 


时 的 Web 而 盏 


读者 扫描 


“ 线 上 阅读 


CE 


x 在 线 阅读 


Er 


1.1 HTML 基 本 的 头 部 标签 


下 面 是 HTML 基 本 的 头 部 元 素 
ldoctype html 
html> 
<head> 
meta charsetr="uf-h"> 
meta hutp equiv -vacompatible’ contenr=" 
eedge"> 
< 4- 移动 寻 的 页 面 这 个 可 以 忽 赂 ， 册 光 本 愉 


文 为 移动 设备 添加 view 


< 以 上 3 个 mcta 标签 " 必 现 * 用 在 head 的 | 
最 丽 面 ; 县 他 任何 的 head 内 容 必 腻 在 这 些 标签 
的 "后面 * 一: 

“tne> 页 面 标题 -de> 


-eua-compatible" content” 


湖 练 习题 目 。 读 者 扫描 最 后 一 


ET 
x HTML5 元 素 表 


| 


就 业 关系 紧密 
二 维 码 ， 即 可 免费 阅 


节 的 “在 


识 的 官方 文档 上 。 通 过 大 量 查阅 ， 真 正 领悟 技术 内 涵 。 


如 何 使 用 本 书 $3 


[eT 2 5% | ooer 中 国 隐 动 字 17:29 Er 
x CSS3 字 体 杠 块 - HT oe 党 CSS3 字 体 模块 - HT 
~ 排版 的 背景 字体 :“ font-fanily "属性 
月 时 
如 
~ 基本 字体 属性 hat 
不 会 就 查 ol 3 
入 【< 条 浇 名 称 > | < 通用 家 族 > ]# 
简单 便捷 v 字体 资源 
TT 篇 : 型 用 户 代理 闫 定 
四 Y 字体 匹配 算法 汉人 所有 元 于 
Ed 
Y 字体 特性 属性 pe 
百 分 
不 通用 
> 字体 特性 解析 1 
人 视觉 
Y 对 象 模型 Hse 二 
权威 参考 旺 《 


6， 其 他 PC 端 资源 下 载 方式 

除了 前 面 介绍 过 的 可 以 直接 将 视频 、 拓 展 阅 读 等 资源 推送 到 邮箱 之 外 ， 还 提供 了 如 下 几 种 PC 端 资 
源 获 取 方式 。 

加 登录 清华 大 学 出 版 社 官方 网 站 ( www.tup.com.cn )， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方式 。 

加 申请 加 入 QQ 群 、 微 信 群 ， 获 得 资源 的 下 载 方式 。 

回 扫描 图 书 封底 “ 文 泉 云 盘 ”二 维 码 ， 获 得 资源 的 下 载 方式 。 


小 白 学 习 电子 书 


为 方便 读者 全 面 提升 ， 本 书 赠送 了 “前 端 开发 百 问 百 答 ” 小 白 学 习 电 子 书 。 这 些 内 容 精 挑 细 选 ， 
希望 成 为 您 学 习 路 上 的 好 帮手 ， 关 键 时 刻 解 您 所 需 。 


前 端 开发 百 问 百 答 


了 7 Ee ( 微 课 精 编 版 ) 


从 小 白 到 高 手 的 虹 变 

谷歌 的 创始 人 拉 里 ， 佩 奇 说 过 ， 如 果 你 刻意 练习 某 件 事 超过 10000 个 小 时 ,那么 你 就 可 以 达到 世 
界 级 。 

因此 ， 不 管 您 现在 是 怎样 的 前 端 开 发 小 白 ， 只 要 您 按照 下 面 的 步骤 来 学 习 ， 假 以 时 日 ， 您 会 成 为 令 自 
己 惊 讶 的 技术 大 咖 。 

(1) 扎实 的 基础 知识 + 大量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 综合 案例 。 

(2 ) 大 量 的 项 目 案例 观摩 、 学 习 、 操 练 ， 塑 造 一 定 的 项 目 思维 。 

(3 ) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 素材 ， 能 够 做 到 拿 来 就 用 ， 学 会 站 在 巨人 的 肩 
膀 上 


(4 ) 多 参阅 一 些 官方 权威 指南 ， 拓 展 自己 对 技术 的 理解 和 应 用 能 力 。 

(5 ) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进步 。 

书本 厚度 有 限 ， 学 习 空 间 无 限 。 纸 张 价格 有 限 ， 知 识 价值 无 限 。 和 希望 本 书 能 帮 您 真正 收获 知识 和 学 习 
的 乐趣 。 最 后 ， 视 您 阅读 快乐 ! 


eV。 


Preface 


“网 络 开发 视频 大 讲堂 ”系列 丛书 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 配 备 全 程 视频 等 ， 备 受 读者 欢 
迎 。 从 书 累计 销售 20 多 万 册 ， 其 中 ,《HTML5+CSS3 从 人 门 到 精通 》 累 计 销售 10 万 册 。 同 时 ， 系 列 书 被 
上 百 所 高 校 选 为 教学 参考 用 书 。 

本 次 改版 ， 在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进 行 了 优化 ， 选 择 面试 、 就 业 最 急需 的 内 容 ， 
重新 录制 了 视频 ,同时 增加 了 许多 当前 流行 的 前 端 技术 ,提供 了 “入 门 学 习 一 实例 应 用 一 项 目 开 发 一 能 力 
测试 二 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容量 更 大 ， 以 帮助 读者 快速 掌握 前 端 开发 所 需要 的 核心 
精髓 内 容 。 

随 着 HTMLS 技术 的 不 断 发 展 与 成 熟 ， 移 动 应 用 开发 领域 迎 来 了 条 新 的 时 代 。 当 然 HTML5 也 不 是 万 能 
的 ， 毕 竞 iOS 和 Android 作为 原生 技术 有 着 不 可 替代 的 地 位 ， 如 果 将 HTML5+CSS3 的 前 端 技术 发 挥 到 极致 ， 
也 会 让 移动 应 用 开发 更 上 一 层 楼 。 如 何在 多 平台 上 创建 高 性 能 、 响 应 式 移动 网 站 ? 对 于 网 页 设计 人 员 来 说 ， 
由 于 智能 移动 设备 快速 增加 、 屏 幕 尺 寸 各 不 相同 、 性 能 仍 有 局 限 性 ， 这 个 问题 就 显得 非常 重要 。 本 书 提供 
了 答案 。 通 过 阅读 本 书 ， 你 会 知道 如 何 有 效 地 利用 最 新 的 HIML5+CSS3 技术 ， 针 对 移动 网 站 的 功能 来 设 
计 网 页 ， 横 跨 多 个 移动 平台 ， 设 计 可 靠 的 移动 版 Web 页 面 ， 并 借助 CSS3 技术 让 页 面 能 够 适应 不 同 的 设备 ， 
展现 最 完美 的 移动 效果 。 


本 书 内 容 


HTMIL5 语言 基础 
CSS3 语言 基础 
设计 移动 页 面 结构 
移动 网 页 | 设计 移动 页 面 内 容 
设计 基础 美化 移动 网 页 文本 知识 讲解 
设计 列表 结构 [| 
基础 知识 使 用 移动 多 媒体 示意 图 、 流 程 图 、 效 果 
2 使 用 CSS3 设计 移动 版 式 精彩 实例 


核心 技术 使 用 媒体 查询 设计 响应 式 页 面 微 视频 讲解 
2 -| 使 用 CSS3 设计 弹性 布局 

高 级 应 用 设计 响应 式 图 片 拓展 微 阅读 
一 移动 网 页 |‖ 使 用 HTMILS 设计 移动 页 面 表单 
i 设计 进 阶 | 设计 响应 式 表格 Cn 
使 用 CSS3 美化 背景 样式 注意 、 提 示 、 说 明 

使 用 CSS3 美化 界面 样式 
使 用 CSS3 设计 动画 前 端 开发 资源 库 


移动 网 页 |‖ 设计 响应 式 网 站 
设计 实战 设计 APP 类 型 网 站 
发 布 网 站 


2 er 


% 
本 书 特点 


1.， 由浅 入 深 ,编排 合理 ， 实 用 易学 

本 书 系统 地 讲解 了 HTMLS5 移动 Web 开发 技术 ， 同 时 配合 大 量 实例 ， 循 序 渐进 地 为 读者 深入 讲解 移动 
网 页 设计 和 开发 技术 。 

2 跟着 案例 和 视频 学 ， 入 门 更 容易 

跟着 例子 学 习 ， 通 过 训练 提升 ， 是 初学 者 最 好 的 学 习 方 式 。 本 书 案 例 丰富 详尽 ， 且 都 附 有 详尽 的 代码 
注释 及 清晰 的 视频 讲解 。 跟 着 这 些 案例 边 做 边 学 ， 可 以 避免 学 到 的 知识 流 于 表面 、 限 于 理论 ， 尽 情感 受 编 
程 带 来 的 快乐 和 成 就 感 。 

3. 4 大 类 线 上 资源 ， 多 元 化 学 习 体验 

为 了 传递 更 多 知识 ， 本 书 力求 突破 传统 纸 质 书 的 厚度 限制 。 本 书 提 供 了 4 大 类 线 上 微 资 源 ， 通 过 手机 
扫 码 ， 读 者 可 随时 观看 讲解 视频 ， 拓 展 阅 读 相 关 知 识 ， 在 线 练习 强化 提升 ， 还 可 以 查阅 官方 权威 资料 ， 全 
程 便捷 、 高 效 ， 感受 不 一 样 的 学 习 体验 。 

4. 精彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 

本 书 根 据 初学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”“ 提 示 ” 等 小 栏目 。 通 过 这 
些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 掌 握 很 多 应 用 技巧 。 


本 书 配套 资源 


279 节 同 步 微 视频 
34 项 拓展 微 阅 读 
460 个 实例 案例 分 析 
340 个 在 线 微 练习 


324 项 源 代码 资源 快速 掌握 前 端 开发 精髓 


PSD 网 页 分 层 模板 (426 套 ) 

设计 素材 大 全 (17 类 ，10000 个 ) 

网 页 配色 工具 箱 ( 600 个 ) 

网 页 模板 大 全 ( 632 套 ) 

JavaScript 网 页 特效 大 全 (24 套 ) 

Bootstrap 网 页 模板 ( 500 套 ) 拿 来 就 用 ,提升 速度 
Photoshop 设计 大 全 (18 类，2000 个 ) 

历史 经 典 网 页 欣赏 ( 508 例 ) 


网 页 设计 初级 示例 大 全 (49 例 ) 
网 页 应 用 分 类 人 案例 大 全 (1600 例 ) 


HTML5+CSS3+JavaScript 实用 案例 大 全 本 
(3200 例 ) EA 


PHP、MySQL 参考 手册 (5 册 ) 

9 本 CSS 参考 手册 

10 本 HTML 参考 手册 拓宽 眼界 ,提升 内 功 
23 本 JavaScript 参考 手册 

1 本 Photoshop 学 习 手 册 


HTML、CSS 面试 题 (351 题 ) 一 一 一 一 一 
JavaScript 面试 题 ( 685 题 ) 打造 超 强 就 业 能 
前 端 开 发 /设计 面试 经 验 


ssVI。 


读者 对 象 


回 HTML 5 初学 者 和 进 阶 者 。 

回 ”网 站 开发 和 网 页 设计 的 从 业 人 员 。 

回 大 、 中 专 院 校 ， 以 及 相关 培训 机 构 的 教师 和 学 生 。 

本 书 所 有 HTML 示例 都 应 该 嵌 套 在 一 个 有 效 文档 的 <body> 标签 中 ， 同 时 ，CSS 包含 在 内 部 或 外 部 样 
式 表 中 。 对 于 包含 重复 内 容 的 HTML 示例 ， 本 书 可 能 不 会 列 出 每 一 行 代 码 ， 而 是 适时 地 使 用 省 略 号 表示 部 
分 代码 ， 详 细 代码 需要 参阅 本 书 源码 示例 。 

本 书 所 列 出 的 插图 可 能 会 与 读者 实际 环境 中 的 操作 界面 有 所 差别 ， 这 可 能 是 由 于 操作 系统 平台 、 浏 览 
器 版 本 等 不 同 而 引起 的 ， 在 此 特别 说 明 ， 读 者 应 该 以 实际 情况 为 准 。 

本 书 所 有 案例 代码 都 是 在 HIML5 类 型 文档 中 编写 。 所 有 示例 也 能 够 兼容 HIML 4.01 和 XHTML 1.0。 


由 于 CSS3 技术 还 在 不 断 地 完善 与 更 新 中 ， 建 议 根 据 本 书 提供 的 参考 地 址 ， 获 取 有 关 CSS3 的 最 新 信息 
与 更 新 。 


读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 ( 需要 刊 开 涂 层 ) 获取 学 习 权 限 ， 然 后 即 可 免费 学 习 书 中 的 
所 有 线 上 线 下 资源 。 

本 书 所 附 赠 的 超 值 资源 库 内 容 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 ( www.tup.com.cn )， 在 对 应 图 书页 面 
下 获取 其 下 载 方式 。 也 可 扫描 图 书 封底 的 “ 文 泉 云 盘 ”二 维 码 ， 获 取 其 下 载 方式 。 

本 书 提 供 QQ 群 (668118468、697651657)、 微 信 公 众 号 (qianduankaifa cn)、 服 务 网 站 (www. 
qianduankaifa.cn ) 等 互动 渠道 ， 提 供 在 线 技术 交流 、 学 习 答疑 、 技 术 资 讯 、 视 频 课 堂 、 在 线 勘误 等 功能 。 
在 这 里 ， 您 可 以 结识 大 量 志 同道 合 的 朋友 ， 在 交流 和 切磋 中 不 断 成 长 。 

读者 对 本 书 有 什么 好 的 意见 和 建议 ， 也 可 以 通过 邮箱 ( qianduanjiaoshi@163.com ) 发 邮件 给 我 们 。 


关于 作者 


前 端 科技 是 由 一 群 在 校 教师 和 开发 人 员 组 成 的 团队 ， 主 要 从 事 Web 开发 、 教 学 和 培训 ， 所 编写 的 图 书 
在 网 店 及 实体 店 的 销量 名 列 前 茅 ， 受到 了 广大 读者 的 好 评 、 让 数 十 万 的 读者 轻松 跨 进 了 Web 开发 的 大 门 ， 
为 IT 技术 的 普及 和 应 用 做 出 了 积极 贡献 。 由 于 水 平 有 限 ， 书 中 下 尘 和 不 足 之 处 在 所 难免 ， 欢 迎 各 位 读者 朋 
友 批评 、 指 正 。 


编 者 
2019 年 4 月 
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HTML5 设 计 原 则 
1.2.1 避免 不 必要 的 复杂 性 
1.2.2 支持 已 有 内 容 
1.2.3 ”解决 实际 问题 
1.2.4 用 户 怎么 使 用 就 怎么 设计 规范 . 
1.2.5 优雅 地 降级 .… 
1.2.6 支持 的 优先 级 
HTML5 语 法 特性 .… 
1.3.1 文档 和 标记 
1.3.2 宽松 的 约定 … 
HTML5 基 本 结构 
1.4.1 新 建 HTML5 文 档 
1.4.2 网 页 顶部 和 头 部 
1.4.3 
1.4.4 
1.4.5 
1.4.6 
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1.5.2 ”比较 HTML4 与 HTML5 文 档 结构 
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CSS3 概 述 


CSS3 基 本 用 法 
2.2.1 CSS 样 式 … 


2.2.2 引入 CSS 样 式 
2.2.3 ”CSS 样式 表 .…. ee 
ei vi 
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2.2.5 CSS 格 式 化 
2.2.6 CSS 属 性 … 
2.2.7 CSS 属 性 值 
元 素 选 择 器 
2.3.1 标签 选择 器 
2.3.2 类 选择 器 .. 
2.3.3 ”有 D 选 择 器 .. 
2.3.4 通 配 选择 器 
2.4.1 包含 选择 器 
2.4.2 子 选 择 器 .. 
2.4.3 ” 相 邻 选择 器 
2.4.4 兄弟 选择 器 .… 
2.4.5 分 组 选择 器 
属性 选择 器 
伪 选 择 器 
2.6.1 结构 伪 类 
2.6.2 ”否定 伪 类 .. 
2.6.3 状态 伪 类 .. 
2.6.4 目标 伪 类 .. 
CSS 特 性 . 
2.7.1 CSS 继承 性 
2.7.2 CSS 层 登 性 
在 线 练习 
设计 移动 页 面 结构 … 
圳 4 视频 讲解 : 36 分 钟 
头 部 信息 
3.1.1 定义 网 页 标题 
3.1.2 定义 网 页 元 信息 
3.1.3 定义 文档 视 口 … 
3.1.4 移动 应 用 的 head 头 信息 说 
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定义 内 容 标题 . 
使 用 div 元 素 .…. 


使 用 id 和 clas 
使 用 title 


3.2.2 
SS 
3.2.4 
3.2.5 
3.2.6 
构建 语义 结构 -. 
3.3.1 定义 页 眉 
SS322 
333 
3.3.4 
333 
3.3.6 
3.3.7 定义 页 脚 
3.3.8 使 用 role .. 
案例 实战 .. 
在 线 练习 .. 


通用 文本 
4.1.1 标题 文本 
4.1.2 段落 文本 
描述 文本 .…. 
4.2.1 强调 文本 
4.2.2 ”标记 细则 
4.2.3 
4.2.4 
4.2.5 
4.2.6 
4.2.7 
4.2.8 
4.2.9 
4.2.10 
4.2.11 
4.2.12 
4.2.13 
4.2.14 


标注 编辑 或 不 用 文本 .… 
旨 明 引用 或 参考 


4.4 


5.2 


5.3 


标记 刻度 信和/ 
标记 时 间 信 人， 
标记 联系 信息 
标记 显示 方向 
9 ae 89 
4.3.8 ”标记 旁 注 .… 
HTML5 全 局 属性 
4.4.1 可 编辑 内 容 
4.4.2 快捷 菜单 .… 
4.43 自 定义 属性 … 
4.4.4 定义 可 拖 动 操作 . 
4.4.5 拖 动 数 据 … 
4.4.6 隐藏 元 素 
4.4.7 语法 检查 
4.4.8 ”翻译 内 容 


英 化 页 两 交 生 eaeaassasasiaaesaaa 96 


4.3.3 
4.3.4 
4.3.5 
4.3.6 


设计 字体 样式 
5.1.1 定义 字体 类 型 
5.1.2 定义 字体 大 小 
5.1.3 定义 字体 颜色 
5.1.4 定义 字体 粗细 
5.1.5 定义 艺术 字体 
5.1.6 定义 修饰 线 .… 
5.1.7 定义 字体 的 变 体 . 
5.1.8 定义 大 小 字体 
设计 文本 样式 
5.2.1 定义 文本 对 齐 
5.2.2 定义 垂直 对 齐 
5.2.3 定义 文本 间距 
5.2.4 定义 行 高 … 
5.2.5 定义 首 行 缩 进 
CSS3 文 本 模块 
5.3.1 文本 溢出 
5.3.2 文本 换行 
5.3.3 书写 模式 
5.3.4 initial 值 … 
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5.3.6 unset 值 … 
5.3.7 all 属 性 … 
色彩 模式 
5.4.1 ITgba0 函 数 .. 
5.4.2 
5.4.3 
5.4.4 
5.4.5 
5.4.6 currentColor 值 
文本 阴影 
5.5.1 定义 text-shadow ee 
552 案例 设计 特 丙 守 sss 126 


hsla0 函 数 . 
opacity 属 性 
transparent 值 .. 


5.7.1 使 用 @font-face 
5.7.2 案例: 设计 字体 图 
案例 实战 
设计 文本 新 闻 页 
设计 正文 内 页 … 
设计 列表 文本 样式 
设计 黑 科 技 首页 … 
5.8.5 ”设计 消息 提示 框 
在 线 练习 


设计 列表 缚 构 ss 143 
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定义 列表 
6.1.1 无 序列 表 
6.1.2 有 序列 表 .… 
6.1.3 项 目 编号 … 
6.1.4 设计 CSS 样 式 
6.1.5 嵌 套 列表 
6.1.6 描述 列表 .… 
6.1.7 莱 单 列表 .… 
6.1.8 
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7.6 


设计 导航 页 面 
设计 热 销 榜 .… 
设计 品牌 墙 … 
设计 品类 引导 列表 … 
为 快捷 菜单 添加 命令 
设计 快捷 分 享 命令 .… 
设计 任务 列表 命令 
设计 排行 榜 列表 结构 
设计 图 文 列表 栏目 


认识 网 页 图 像 
使 用 图 像 … 
7.2.1 使 用 img 元 素 . 
7.2.2 定义 流 内 容 .… 
7.2.3 ”插入 图 标 .. 
7.2.4 定义 图 像 大 小 
7.2.5 案例 : 图 文 混 排 
使 用 多 媒体 插件 … 
7.3.1 使 用 embed 元 素 . 
7.3.2 ”使 用 object 元 素 .. 
使 用 HTML5 多 媒体 .…. 
7.4.1 使 用 audio 元 素 
7.4.2 使 用 video 元 素 


7.5.1 设计 网 页 音乐 播放 器 
7.5.2 设计 MP3 播 放 条 .…… 
7.5.3 ”设计 视频 播放 器 
HIML5 多 媒体 API.… 
7.6.1 设置 属性 .. 
7.6.2 设置 方法 .. 
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7.6.4 ”综合 案例 


使 用 CSS3 定义 版 式 ………………………… 201 
促 4 视频 讲解 : 40 分 钟 


CSS 盒 模型 
8.1.1 认识 display.. 
8.1.2 ”认识 CSS 金 模型 .. 
8 秆 污 
8.1.4 
8.1.5 
设计 浮动 显示 .… 
8.2.1 定义 float. 
8.2.2 使 用 clear. 
设计 定位 显示 .… 
8.3.1 定义 position. a 
3 218 
案例 实战 
8.4.1 设计 两 栏 页 面 . 
8.4.2 设计 三 栏 页 面 . 
8.4.3 设计 九宫 格 版 式 . 
8.4.4 设计 用 户 管理 界面 . 
8.4.5 设计 侧 滑 面板 
8.4.6 ”设计 网 格 化 版 式 . 
8.4.7 ”设计 音乐 列表 版 式 
在 线 练习 


使 用 媒体 查询 

讲解 : 21 
认识 媒体 查询 .. 
使 用 媒体 查询 .. 
9.2.1 媒体 类 型 和 媒体 查询 . 
9.2.2 使 用 @media 
9.2.3 ”应 用 @media 
9.2.4 案例 : 设计 第 一 个 响应 式 版 式 


判断 显示 屏幕 宽度 . 
设计 响应 式 版 式 . 
设计 响应 式 菜单 . 
设计 自动 隐藏 布局 . 
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10.4 


9.3.5 设计 自 适应 手机 页 面 


设计 弹性 布局 255 
句 1 视频 讲解 : 32 分 钟 

多 列 布局 
10.1.1 设置 列 宽 .. 
10.1.2 ”设置 列 数 . 
10.1.3 设置 间距 .. 
10.1.4 设置 列 边框 
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10.1.6 设置 列 高 度 .. 
旧版 伸缩 盒 
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22 代 汪 关 轩 a 261 
10.2.3 设置 顺序 .. 
10.2.4 设置 方向 . 
10.2.5 设置 对 齐 方式 
新 版 伸缩 盒 
10.3.1 认识 Flexbox 系 统 .. 
10.3.2 ”启动 伸缩 金 
10.3.3 设置 主轴 方向 
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10.3.5 设置 对 齐 方式 
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设计 多 断 点 弹性 菜单 
设计 粘 附 页 脚 栏 
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11.2.1 基本 用 法 
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12.11.1 定义 自动 完成 
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案例 实战 
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随 着 互联 网 技术 的 不 断 更 新 先 代 ， 网 页 变 得 越 来 越 复杂 ， 但 是 其 底层 结构 依然 
相当 简单 。 创 建 网 页 离 不 开 HIML (Hypertext Markup Language， 超 文本 标记 语言 )， 
HTML 包含 网 页 内 容 ， 并 说 明 这 些 内 容 的 意义 。 本 章 简 单 介绍 HIMLS 基础 知识 ， 帮 助 
读者 轻松 路 入 HIMLS 的 门槛 。 对 于 继承 自 HIML4 的 大 部 分 内 容 就 不 再 次 述 。 


【学 习 重 点 】 

WI 了解 HIML 版 本 和 HTMLS5 开发 历史 。 
WI 了 解 HTML5 设计 原则 。 

WI 熟悉 基本 的 HIMLS 页 面 结构 。 

WI 认 识 标签 、 元 素 、 属 性 和 值 。 

WI 了 解 网 页 文本 内 容 。 
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1.1 HTML5 概述 


2014 年 10 月 28 日，W3C (万 维 网 联盟 ) 的 HTML 工作 组 发 布 了 HTML5 的 正式 推荐 标准 。HTML5 
| 是 构建 开放 Web 平 台 的 核心 ， 是 万 维 网 的 核心 语言 一 一 超 文本 标记 语言 的 第 5 版 。 在 这 一 版 本 中 ， 增 加 了 
| 支持 Web 应 用 的 许多 新 特性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 准则 ， 
| 以 确保 Web 应 用 和 内 容 在 不 同 浏览 器 中 的 互 操作 性 。 

| HTMLS 发 展 的 速度 非常 快 ， 因 此 不 用 担心 浏览 器 的 支持 问题 。 用 户 可 以 访问 www.caniuse.com 网 站 ， 
该 网 站 按照 浏览 器 的 版 本 提供 了 详尽 的 HIMLS 功能 支持 情况 。 

| 如 果 通 过 浏览 器 访问 www.html5test.com， 该 网 站 会 直接 显示 用 户 浏览 器 对 HTMLS5 规范 的 支持 情况 。 
| 


另外 ， 还 可 以 使 用 Modernizr ( JavaScript 库 ) 进行 特性 检测 ， 它 提供 了 非常 先进 的 HTML5 和 CSS3 检测 功 
| 能 。 建 议 使 用 Modemizr 检测 当前 浏览 器 是 否 支持 某 些 特性 。 
【拓展 】 


| 
HTML 从 诞生 至 今 ， 经 历 了 近 30 年 的 发 展 ， 其 中 经 历 的 版 本 及 发 布 日 期 如 表 1.1 所 示 。 
| 表 1.1 HTML 的 发 展 过 程 
| 
| 版 本 发 布 日 期 说 ”有明 
| 超 文本 标记 语言 
| bp9a 年 6 月 作为 互联 网 工程 工作 小 组 QETF) 工作 草案 发 布 ， 非 标准 
| 
| i a 年 6 月 发 布 之 后 被 宣布 已 经 
HML20 0 人 RFC 1866 发 布 ， 在 RFC 2854 于 2000 年 6 月 发 布 之 后 被 宣布 已 
| HIML32 1996 年 1 月 14 日 W3C 推荐 标准 
| 
”HIML4.0 1997 年 12 月 18 日 W3C 推荐 标准 
| HTML40l 1999 年 12 月 24 日 微小 改进 ，W3C 推荐 标准 
| 
于 严格 的 语 是 国际 标准 化 组 织 电工 委员 会 的 标 
人 2000 年 5 月 15 日 en HTML4.01 语法 ， 是 国际 标准 化 组 织 和 国际 电工 委员 会 的 标 
| 
| XHTML 1.0 2000 年 1 月 26 日 W3C 推荐 标准 ,修订 后 于 2002 年 8 月 1 日 重新 发 布 
XHTML11 2001 年 5 月 31 日 较 1.0 有 微小 改进 
| XHTML 2.0 草案 | 没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 
| HIMES 章 案 。 | 2008 年 1 月 HTMLS 规范 先是 以 草案 发 布 ， 经 历 了 漫长 的 过 各 
| HIML5S 2014 年 10 月 28 日 W3C 推荐 标准 
HTIMLS.1 2017 年 10 月 3 日 W3C 发 布 HIMLS 第 1 个 更 新 版 本 (http://www.w3.org/TR/html51/ ) 
| HIML5.2 2017 年 12 月 14 日 W3C 发 布 HTML5 第 2 个 更 新 版 本 (http://www.w3.org/TR/html52/ ) 
| HTMLS.3 2018 年 3 月 15 日 W3C 发 布 HTMLS5 第 3 个 更 新 版 本 ( http://www.w3.org/TR/html53/ ) 
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党 提示: 从 上 面 HIML 发 展 列表 来 看 ，HTML 没有 1.0 版 本 ， 这 主要 是 因为 当时 有 很 多 不 同 的 版 本 。 加 | 
些 人 认为 Tim Bemers-Lee 的 版 本 应 该 算 初 版 ， 他 的 版 本 中 还 没有 img 元 素 ， 也 就 是 说 HIML 


刚 开始 时 仅 能 够 显示 文本 信息 。 


1.2 HTML5 设计 原则 


从 HIML 2.0 到 XHTML 2.0，XHTML 2.0 由 于 语法 解析 过 于 严格 ， 因 此 不 太 适 合 互联 网 开放 、 自 由 的 | 


精神 。Jeremy Keith 认为 所 有 的 项 目 都 应 该 先 有 设计 原则 ，HTML5 也 同样 如 此 ，W3C 为 此 发 布 了 HTML | 


设计 原则 ( http://www.w3.org/TR/html-design-principles/ )， 强 调 了 HIMLS 规范 的 兼容 性 、 实 用 性 和 互 操作 | | 


性 。 简 单 说 明 如 下 。 


1.2.1 避免 不 必要 的 复杂 性 


规范 可 以 写 得 十 分 复杂 ， 但 浏览 器 的 实现 应 该 非常 简单 。 把 复杂 的 工作 留 给 浏览 器 后 台 去 处 理 ， 用 户 | 
仅 需 要 输入 最 简单 的 字符 ， 甚 至 不 需要 输入 ， 才 是 最 佳 文 档 规 范 。 因 此 ，HTML5S 首先 采用 化 繁 为 简 的 思路 


进行 设计 。 
【示例 1】 在 HIML4.01 中 定义 文档 类 型 的 代码 如 下 


<!DOCTYPE html PUBLIC "-/W3C/DTD HTMLA4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


HIMLS 简化 如 下 。 
<!DOCTYPE html> 


HTML4.01 中 的 DOCTYPE 过 于 宛 长 ， 很 难 记 住 这 些 内 容 , 但 在 HTML5 中 只 需要 简单 的 <IDOCTYPE 


html> 就 可 以 了 。DOCTYPE 是 给 验证 器 用 的 ， 而 非 浏览 器 ， 浏 览 器 只 在 做 DOCTYPE 切换 时 关注 它 ， 
并 不 需要 写 得 太 复 杂 。 
【示例 2】 在 HIML4.01 中 定义 字符 编码 的 代码 如 下 。 


<meta http-equiv="Content-Type" content="text/html: charset=utf-8"> 
在 XHTML 1.0 中 还 需要 再 声明 XML 标签 ， 并 在 其 中 指定 字符 编码 。 


<?xml version="1.0" encoding="UTF-8" ?> 
<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 


HIML5 简化 如 下 。 


<meta charset="utf-8"> 


关于 省 略 不 必要 的 复杂 性 ,或 者 说 避免 不 必要 的 复杂 性 的 例子 还 有 不 少 。 但 关键 是 既 角 可不 必 要 的 


复杂 性 ， 还 不 会 妨碍 在 现 有 浏览 器 中 使 用 。 


在 HTML5 中 ， 如 果 使 用 link 元 素 链接 到 一 个 样式 表 ， 先 定义 rel-"stylesheet"， 然 后 再 定义 type"text | 


因 


css"， 这 样 就 重复 了 。 对 浏览 器 而 言 ， 只 要 设置 rel="stylesheet" 就 够 了 ， 因 为 它 可 以 猜 出 要 链接 的 是 一 个 | 


。3。 
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| 
| 
| 
| 
| CSS 样式 表 ， 不必 再 指定 type 属性 。 

| 对 Web 开发 而 言 ， 开 发 者 都 使 用 JavaScript 脚本 语言 ， 它 是 默认 的 通用 语言 ， 用 户 可 以 为 script 元 素 
BM | 定义 type="text/javascript" 属性 ， 也 可 以 什么 都 不 写 ， 浏览 器 自然 会 假设 在 使 用 JavaScript。 
食 - | 


1.2.2 支持 已 有 内 容 


XHTML 2.0 最 大 的 问题 就 是 不 支持 已 经 存在 的 内 容 ， 这 违反 了 Postel 法 则 ( 即 对 自己 发 送 的 东西 要 严 
格 ， 对 接收 的 东西 则 要 宽容 )。 现 实情 况 中 ,开发 者 可 以 写 出 各 种 风格 的 HIML， 浏 览 器 遇 到 这 些 代 码 时 ， 
在 内 部 所 构建 出 的 结构 应 该 是 一 样 的 ， 呈 现 的 效果 也 应 该 是 一 样 的 。 

【示例 】 下 面 的 示例 展示 了 编写 同样 内 容 的 4 种 不 同 写法 ，4 种 写法 唯一 的 不 同 点 就 是 语法 。 

<img src="foo" alt="bar" /> 

<p class="foo">Hello world</p> 


<img src="foo" alt="bar"> 
<p class="foo">Hello world 


<IMG SRC="foo" ALT="bar"> 
<P CLASS="foo">Hello world</P> 


<img src=foo alt=bar> 
<p class=foo>Hello world</p> 


| 从 浏览 器 解析 的 角度 分 析 ， 这 些 写 法 实际 上 都 是 一 样 的 。HIML5 必须 支持 已 经 存在 的 约定 ， 适 应 不 同 
| 的 用 户 习 惯 ， 而 不 是 用 户 适 应 浏览 器 的 严格 解析 标准 。 


1.2.3 解决 实际 问题 
规范 应 该 去 解决 现实 中 实际 遇 到 的 问题 ， 而 不 该 考虑 那些 复杂 的 理论 问题 。 
【示例 】 既 然 有 在 a 中 嵌 套 多 个 段落 元 素 的 需要 ， 那 就 让 规范 支持 它 。 
这 块 内 容 包含 一 个 标题 ， 一 个 段落 。 按 照 HIML4 规范 ， 必 须 至 少 使 用 两 个 链接 。 
<h2><a hre 仁 "#"> 标题 文本 </a></h2> 
<p><a hre 伍 "#"> 段落 文本 </a></p> 


| 
| 
| 
| 
| 
| 
| 
| 在 HTML5 中 ,只 需要 把 所 有 内 容 都 包 囊 在 一 个 链接 中 就 可 以 了 。 
| <a href="#"> 

| <h2> 标题 文本 </h2> 

| <p> 段落 文本 <p> 

| </a> 

| 

| 

| 


其 实 这 种 写法 早已 经 存在 ， 当 然 以 前 这 样 写 是 不 符合 规范 的 。 所 以 说 ,HTML5 解决 现实 的 问题 ， 其 本 
质 是 纠正 


因循守旧 的 规范 标准 ， 现 在 把 标准 改 了 ， 人 允许 用 户 这 样 写 了 。 


“4. 


第 1 章 HTML5 基础 


1.2.4 用 户 怎么 使 用 就 怎么 设计 规范 


当 一 个 实践 已 经 被 广泛 接受 时 ， 就 应 该 考虑 将 它 吸 纳 进来 ， 而 不 是 禁止 它 或 搞 一 个 新 的 实践 出 来 。 例 | | 
如 ，HTML5 新 增 了 nav、section 、article 、aside 等 标签 ， 它 们 引入 了 新 的 文档 模型 ， 即 文档 中 的 文档 。 在 | 
section 中 ， 可 以 幅 套 hl 到 h6 的 元 素 ， 这 样 就 有 了 无 限 的 标题 层级 ， 这 也 是 很 早 之 前 Tim Bemers-Lee 所 设 | Note 
想 的 。 | 
【示例 】 下 面 的 代码 相信 读者 都 不 会 陌生 ， 这 些 都 是 频繁 被 使 用 过 的 ID 名 称 。 | 
<div id="header">...</div> | 
| 
| 
| 


<div id="navigation">...</div> 
<div id="main">...</div> 

<div id="aside">...</div> 

<div id="footer">...</div> 


在 HTML5 中 ,可 以 用 新 的 元 素 代替 使 用 。 
<header>...</header> 


| 
| 
| 
<div 1 main">...</div> | 
<aside>...</aside> | 
<footer>...</footer> | 
| 
| 
| 
| 
| 


实际 上 ， 这 并 不 是 HTMLS5 工作 组 想 出 来 的 ， 也 不 是 W3C 提出 来 的 ， 而 是 谷歌 公司 根据 大 数据 分 析 用 
户 习惯 得 出 来 的 。 


1.2.5 ”优雅 地 降级 


渐进 增强 的 另 一 面 就 是 优雅 地 回 退 。 最 典型 的 例子 就 是 使 用 type 属性 增强 表单 。 

【示例 1】 下 面 的 代码 列 出 了 可 以 为 type 属性 指定 的 新 值 ， 如 number 、search 、range 等 。 

<input type="number" /> 

<input type="search" /> 

<input type="range" /> 

<input type="email" /> 

<input type="date" /> 

<input type="url" /> | 

最 关键 的 问题 在 于 : 当 浏览 器 看 到 这 些 新 type 值 时 会 如 何 处 理 。 老 版 本 浏览 器 是 无 法 理解 这 些 新 type | 
值 的 。 但 是 当 它 们 看 到 自己 不 理解 的 type 值 时 ， 会 将 type 的 值 解释 为 text。 | 

【示例 2】 对 于 新 的 video 元 素 ， 它 设计 得 很 简单 、 实 用 。 针 对 不 支持 video 元 素 的 浏览 器 可 以 这 样 写 。 | 


<video src="movie.mp4"> 
<!- 回 退 内 容 -> 
</video> 


这 样 HIMLS 视频 与 Flash 视频 就 可 以 协同 起 来 ， 用 户 不 用 纠结 如 何 选择 。 


<video src="movie.mp4"> | 
<object data="movie.swf'> | 


。5 。 


| 种 解决 方案 ， 而 WHATWG ( 网 页 超 文本 技术 工作 小 组 ) 给 出 了 另 一 种 解决 方案 。 


| 视频 讲 
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<!-- 回 退 内 容 -> 
</object> 
</video> 
如 果 愿 意 的 话 ， 还 可 以 使 用 source 元 素 ， 而 非 src 属性 来 指定 不 同 的 视频 格式 。 


<video> 
<source src="movie.mp4"> 
<source src="movie.ogv"> 
<object data="movie.swf"> 
<a href="movie.mp4">download</a> 
</object> 
</video> 


上 面 代码 包含 了 4 个 不 同 的 层次 。 

回 ”如 果 浏 览 器 支持 video 元 素 ， 也 支持 H.264 视频 编码 格式 ， 用 第 一 个 视频 。 
回 ”如果 浏览 器 支持 video 元 素 ， 支 持 Ogg 视频 编码 格式 ， 那么 用 第 二 个 视频 。 
回 ”如果 浏览 器 不 支持 video 元 素 ， 那么 就 要 试 试 Flash 视频 。 

回 ”如果 浏 览 器 不 支持 video 元 素 ， 也 不 支持 Flash 视频 ， 还 可 以 给 出 下 载 链接 。 


总 之 ,无 论 是 HIML5， 还 是 Flash， 一 个 也 不 能 少 。 如 果 只 使 用 video 元 素 提供 视频 ， 难 免 会 遇 到 问 


| 题 。 而 如 果 只 提供 Flash 影片 ， 性 质 是 一 样 的 。 所 以 还 是 应 该 两 者 兼顾 。 


.1.2.6 支持 的 优先 级 


用 户 与 开发 者 的 重要 性 要 远 远 高 于 规范 和 理论 。 在 考虑 优先 级 时 ， 应 该 遵循 下 面 的 顺序 : 


用 户 一 编写 HTML 的 开发 者 一 浏览 器 厂商 一 规范 制定 者 一 理论 


这 个 设计 原则 本 质 上 是 一 种 解决 冲突 的 机 制 。 例 如 ， 当 面临 一 个 要 解决 的 问题 时 ， 如 果 W3C 给 出 了 一 


- 旦 遇 到 冲突 ， 最 终 用 
| 户 优先 ， 其 次 是 开发 人 员 ， 再 次 是 实现 者 ， 然 后 是 规范 制定 者 ， 最 后 才 是 理论 上 的 完美 。 


根据 最 终 用 户 优先 的 原则 ， 开 发 人 员 在 链条 中 的 位 置 高 于 实现 者 ， 假 如 开发 人 员 发 现 规范 中 的 特性 某 


| 性 ， 因 为 开发 人 员 有 更 高 的 权重 。 本 质 上 用 户 拥有 了 更 大 的 发 言 权 ， 开 发 人 员 也 拥有 了 更 多 的 


1.3 HTML5 语法 将 性 


A 


| 些 地 方 有 问题 ， 从 而 不 支持 实现 该 特性 ， 那 么 等 于 把 相应 的 特性 给 否定 了 ， 相 应 地 ， 规 范 里 就 得 删除 该 特 


E 动 性 。 


HTML5 以 HTML4 为 基础 ， 对 HIML4 进行 了 全 面 升级 改造 。 与 HTML4 相 比 ，HTMLS5 在 语法 上 有 很 


| 大 的 变化 ， 具 体 说 明 如 下 。 


1.3.1 文档 和 标记 


1. 内 容 类 型 


HTMLS5 的 文件 扩展 名 和 内 容 类 型 保持 不 变 。 例 如 ， 扩 展 名 仍然 为 “html” 或 “.htm”"， 内 容 类 型 
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( content-type ) 仍然 为 “text/html”。 
2. 文档 类 型 
在 HTML4 中 , 文档 类 型 的 声明 方法 如 下 。 a 
<IDOCTYPE html PUBLIC "-/W3CWDTD XHTML 1.0 Transitional/EN" "http://www.w3.0rg/TR/xhtmll/DTID/xhtmll- 
transitional.dtd"> 
在 HTML5 中 , 文档 类 型 的 声明 方法 如 下 。 
<IDOCTYPE html> 


| 
| 
| 
| 
| 
当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 中 加 入 SYSTEM 识别 符 ， 声 明 方 法 如 下 。 | 
<!DOCTYPE HTML SYSTEM "about:legacy-compat"> | 
| 
| 


在 HIML5 中 ，DOCTYPE 声明 方式 是 不 区 分 大 小 写 的 ， 引 号 也 不 区 分 是 单 引号 还 是 双 引号 。 
< 注意 ; 使 用 HTML5 的 DOCTYPE 会 触发 浏览 器 以 标准 模式 显示 页 面 ,众所周知 ， 网 页 有 多 种 显示 模式 ， | 
如 怪异 模式 ( Quirks )、 标 准 模 式 ( Standards )。 浏 览 器 根据 DOCTYPE 来 识别 该 使 用 哪 种 解析 
模式 。 | 

3. 字符 编码 
在 HIML4 中 ,使 用 meta 元 素 定义 文档 的 字符 编码 ， 如 下 所 示 。 


<meta http-equiv="Content-Type" content="text/html:charset=UTF-8"> 


在 HIML5 中 ,继续 沿用 meta 元 素 定义 文档 的 字符 编码 ， 但 是 简化 了 charset 属性 的 写法 ， 如 下 所 示 。 


<meta charset="UTF-8"> 


对 于 HTML5 来 说 ， 上 述 两 种 方法 都 有 效 ， 用 户 可 以 继续 使 用 前 面 一 种 方式 ， 即 通过 content 元 表册 
性 来 指定 。 但 是 不 能 同时 混用 两 种 方式 。 


< 注意 : 在 传统 网 站 中 ， 可 能 会 存在 下 面 的 标记 。 在 HTML5 中 ， 这 种 字符 编码 方式 将 被 认为 是 错误 的 。 | 
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html:charset=UTF-8"> 
从 HIML5 开始 ， 对 于 文件 的 字符 编码 推荐 使 用 UTF-8。 


HTMLS5 的 语法 是 为 了 保证 与 之 前 的 HTML4 的 语法 达到 最 大 程度 的 兼容 而 设计 的 。 
.标记 省 略 

ite 中 ,元 素 的 标记 可 以 分 为 3 种 类 型 : 不 允许 写 结束 标记 、 可 以 省 略 结束 标记 、 开 始 标记 和 结 
东 标 记 全 部 可 以 省 略 。 下 面 简单 介绍 这 3 种 类 型 各 包括 哪些 HIML5 新 元 素 。 

第 一 ， 不 允许 写 结束 标记 的 元 素 有 : area、base、br、col、command、embed、 hr、img、input、keygen、 
link、 meta、param、source、track、wbr。 

第 二 ， 可 以 省 略 结束 标记 的 元 素 有 : li、dt、dd、p、rt、mp、optgroup、option、colgroup、thead、tbody、 
ttoot、tr、td、 也 。 


1.3.2 ”宽松 的 约定 
| 
| 


Ey 


te 
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第 三 ， 可 以 省 略 全 部 标记 的 元 素 有 : html、head、body、colgroup、tbody。 


| 次 提示 : 不 允许 写 结束 标记 的 元 素 是 指 ， 不 允许 使 用 开始 标记 与 结束 标记 将 元 素 括 起 来 的 形式 ， 只 允许 使 


用 < 元 素 户 的 形式 进行 书写 。 例 如 : 

回 错误 的 书写 方式 

<br></br> 

正确 的 书写 方式 

<br> 

HIMLS 之 前 的 版 本 中 <br> 这 种 写法 可 以 继续 沿用 。 

可 以 省 略 全 部 标记 的 元 素 是 指 元 素 可 以 完全 被 省 略 。 注 意 ， 该 元 素 还 是 以 隐 式 的 方式 存在 的 。 例 
如 ， 将 body 元 素 省 略 时 ， 但 它 在 文档 结构 中 还 是 存在 的 ， 可 以 使 用 document.body 进行 访问 。 


2. 布尔 值 
对 于 布尔 型 属性 ， 如 disabled 、readonly 等 ， 当 只 写 属性 而 不 指定 属性 值 时 ， 表 示 属 性 值 为 tue; 如 果 


属性 值 为 lse， 可 以 不 使 用 该 属性 。 另 外 ， 要 想 将 属性 值 设 定 为 tue 时 ， 也 可 以 将 属性 名 设 定 为 属性 值 ， 


| 或 将 


串 、 


空 字符 串 设 定 为 属性 值 。 

【示例 1】 下 面 是 几 种 正确 的 书写 方法 。 

<!-- 只 写 属性 ,不 写 属性 值 ， 代 表 属性 为 tme--> 
<input type="checkbox" checked> 

<!-- 不 写 属性 ， 代 表 属性 为 false--> 

<input type="checkbox"> 

<!-- 属性 值 = 属性 名 ， 代 表 属 性 为 true--> 
<input type="checkbox" checked="checked"> 

<!-- 属性 值 = 空 字符 串 ， 代 表 属 性 为 tue--> 
<input type="checkbox" checked=""> 


3， 属 性 值 

属性 值 可 以 加 双 引 号 ， 也 可 以 加 单 引号 。HTMLS5 在 此 基础 上 做 了 一 些 改进 ， 当 属性 值 不 包括 空 字符 
<、>、=、 单 引号 、 双 引号 等 字符 时 ， 属 性 值 两 边 的 引号 可 以 省 略 。 

【示例 2】 下 面 的 写法 都 是 合法 的 。 

<input type="text"> 

<input type='text> 

<input type=text> 


1.4 HTMLS 基本 结构 


HIML 是 一 种 标记 语言 ， 不 是 编程 语言 。 标 记 内 容 需 要 用 到 元 素 ， 元 素描 述 内 容 是 什么 ， 而 非 内 容 显 


示 效 果 。CSS 才 负责 控制 内 容 的 外 观 (如 字体 、 颜 色 、 阴 影 等 )。 因此， 不 管用 户 最 后 让 段落 显示 为 绿色 ， 


| 还 是 红色 ， 它 们 都 是 p 元 素 ， 这 是 HTML 唯一 关心 的 焦点 。 在 学 习 和 创建 HIML 网 页 时 ， 应 该 始终 牢记 这 


一 原则 。 
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1.4.1 ”新建 HTML5 文档 


使 用 记事 本 新 建 一 个 文本 文件 ， 保 存 为 index.html。 注 意 ,扩展 名 为 html， 而 不 是 .txt。 然 后 输入 下 面 | 
的 代码 。 | 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="utf-8" /> 
<title> 网 页 标题 </title> 
</head> 

<body> 

</body> 

</html> 


| 

党 提示 : 如 果 使 用 专业 网 页 编辑 器 ， 如 Dreamweaver 等 ， 新 建 网 页 文件 时 ， 它 会 自动 帮助 完成 上 面 代码 的 
输入 。 | 
通过 上 面 的 代码 ， 可 以 看 到 每 个 网 页 都 由 固定 的 结构 开始 构建 。 这 段 HTML 代码 创建 的 网 页 相 

当 于 一 张 白 纸 ， 因 为 访问 者 看 到 的 内 容 位 于 主体 部 分 ( 即 <body> 和 </body> 之 间 的 部 分 )， 而 这 


一 部 分 现在 是 空 的 ， 如 图 1.1 所 示 。 


的 内 容 包括 两 项 : 一 是 设置 lang 属性 的 语言 代码 ， 二 是 <title> 和 </title> 之 间 的 文字 。HTML 使 用 “<” 和 | 
“>” 字 符 包围 HTML 标签 。 开 始 标签 ( 如 <head> ) 用 于 标记 元 素 的 开始 ， 结 束 标签 ( 如 </head> ) 用 于 标 | 
记 元 素 的 结束 。 有 的 元 素 没 有 结束 标签 ， 如 meta。 | 
【拓展 】 | 
完整 的 HTML 文档 应 该 包含 两 部 分 结构 : 头 部 信息 ( <head>) 和 主体 内 容 ( <body> )。 为 了 使 网 页 内 | 
容 更 加 清晰 、 明 确 ， 容 易 被 他 人 阅读 ， 或 者 被 浏览 器 以 及 各 种 设备 所 理解 ， 新 建 HIML5 文档 之 后 ,需要 
完善 这 两 部 分 内 容 ， 构 建 基本 的 网 页 框架 。 | 
| 

| 


一 个 网 页 主要 包括 以 下 3 个 部 分 。 | 
回 文本 内 容 : 在 页 面 上 让 访问 者 了 解 页 面 内 容 的 纯 文 字 ， 如 关于 产品 、 资 讯 的 内 容 ， 以 及 其 他 任何 | 
内 容 。 


回 外 部 引用 : 使 用 这 些 引 用 来 加 载 图 像 、 音 频 、 视 频 文 件 ， 以 及 样式 表 ( 控制 页 面 的 显示 效果 ) 和 | 
JavaScript 文件 ( 为 页 面 添加 行为 )。 这 些 引 用 还 可 以 指向 其 他 的 HTML 页 面 和 资源 。 | 
回 标记 : 对 文本 内 容 进行 描述 ， 并 确保 浏览 器 能 够 正确 显示 。 提 示 ,，HTML 一 词 中 的 字母 M 就 代表 | 
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名 


标记 。 
每 一个 HTML 页 面 的 开头 部 分 ， 还 会 包含 一 些 信息 ， 主 要 用 于 浏览 器 和 搜索 引擎 (如 百度 .Google 等 ) 
。 | 的 解析 。 浏览 器 不 会 将 这 些 信息 呈现 给 访问 者 。 
国门。 网 页 内 容 都 由 文本 构成 ， 因 此 网 页 可 以 保存 为 纯 文本 格式 ， 可 以 在 任何 平台 上 使 用 任何 浏览 器 查看 ， 
9 无论 是 台式 机 、 手 机 、 平 板 电脑 ， 还 是 其 他 平台 。 这 个 特性 也 确保 了 用 户 很 容易 创建 HIML 页 面 。 


迪 提示 : 本 书 使 用 HTML 泛 指 这 门 语言 本 身 。 如 果 需 要 突出 HTML 某 一 版 本 独 有 的 特殊 属性 ， 则 使 用 它 
们 各 自 的 名 称 。 例如, HTMLS5 引入 了 一 些 新 的 元 素 ， 并 重新 定义 或 删除 了 HIML4 和 XHTML 1.0 
中 的 某 些 元 素 。 


1.4.2 ”网 页 顶部 和 头 部 


完整 的 HIML 文档 应 该 包含 以 下 两 部 分 结构 。 

回头 部 信息 (head ) 

回 主体 内 容 (body ) 

为 了 使 网 页 内 容 更 加 清晰 、 明 确 ， 容 易 被 他 人 阅读 ， 或 者 被 浏览 器 ， 以 及 各 种 设备 所 理解 ， 新 建 
HITML5 文档 之 后 ， 需 要 完善 这 两 部 分 内 容 ， 构 建 基 本 的 网 页 框架 。 

页 面 内 容 位 于 主体 部 分 ，<body> 开始 标签 以 上 的 内 容 都 是 为 浏览 器 和 搜索 引擎 准备 的 。<!DOCTYPE 
| html> 部 分 ( 简称 为 DOCTYPE ) 告诉 浏览 器 这 是 一 个 HTML5 页 面 。DOCTYPE 应 该 始终 位 于 代码 的 第 一 
| 行 ， 写 在 HTML 页 面 的 顶部 。 
| html 元 素 包 着 页 面 的 其 余部 分 ， 即 <html> 开始 标签 和 </html> 结束 标签 ( 表示 页 面 的 结尾 ) 之 间 的 


| <title> 和 <jtitle> 之 间 的 文本 。 这 些 文本 会 出 现在 浏览 器 标签 页 中 。 某 些 浏览 器 会 在 窗口 的 顶部 显示 这 些 文 
| 本 ， 作 为 网 页 的 标题 显示 。 此 外 ， 这 些 文本 通常 还 是 浏览 器 书签 的 默认 名 称 ， 它 们 对 搜索 引擎 来 说 也 是 非 
| 常 重要 的 信息 。 

| 
| 
| 


1.4.3 ”网 页 主体 


| <head> 和 </head> 标签 之 间 的 区 域 表 示 网 页 文档 的 头 部 。 头 部 代码 中 ， 有 一 部 分 是 浏览 者 可 见 的 ， 即 
| 
| 


尝试 为 页 面 添加 一 些 主体 内 容 。 


| 

| 

| <!IDOCTYPE html> 

| <html lang="en"> 

| <head> 

| <meta charset="utf-8" /> 

| <title> 从 今天 开始 努力 学 习 HTML5</title> 
| </head> 

| <body> 

| <article> 

| <hl> 小 白 自 语 <hl> 

| <img src="images/xiaobai jpg" width="50" alt=" 小 白 者 ,我 也 " /> 

| <p> 我 是 <em> 小 白 </em>. 现在 准备 学 习 <a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5 
参考 手册 ">HTML5</a></p> 
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在 桌面 浏览 器 中 呈现 这 段 HTML 代码 效果 ， 如 图 1.2 所 示 。 这 是 页 面 在 下 中 显示 的 效果 ， 在 其 他 浏览 局 
器 中 的 效果 也 是 相似 的 。 使 用 浏览 器 查看 网 页 时 ， 不 会 显示 包围 文本 内 容 的 标记 ， 但 是 这 些 标记 是 非常 有 县 9 
用 的 ， 我 们 使 用 它们 来 描述 内 容 ， 如 <p> 标记 用 于 表示 段落 的 开始 。 


| 

| 

| 

© ET FTC 
| 

| 

| 

| 


我 是 处 应 现在 准备 学 习 HTML5 


图 1.2 添加 主体 内 容 


整个 页 面包 含 了 3 部 分 : 文本 内 容 、 外 部 文件 的 引用 ( 图像 的 sre 值 和 链接 的 href 值 ) 和 标记 。 HTML 
提供 了 很 多 元 素 ， 上 面 的 示例 演示 了 6 种 最 为 常见 的 元 素 : a、article、em、hl、img 和 p。 每 人 个 元 素 都 有 各 | | 
自 的 含义 ， 例 如 ，hl 是 标题 ，a 是 链接 ，img 是 图 像 。 | 
| 


人骨 注意 ; 在 代码 中 行 与 行 之 间 通过 回 车 符 分 开 ， 不 过 它 不 会 影响 页 面 的 呈现 效果 。 对 HTML 进行 代码 缩 
进 显 示 ， 与 内 容 在 浏览 器 中 的 显示 效果 没有 任何 关系 ,但 是 pre 元 素 是 一 个 例外 。 习 惯 上 ， “| 
们 会 对 嵌 套 结构 的 代码 进行 缩 进 排版 ， 这 样 会 更 容易 看 出 元 素 之 间 的 层级 关系 。 


1.4.4 ”认识 标签 
标签 和 元 素 是 两 个 不 同 的 概念 ， 一 个 标签 由 3 部 分 组 成 : 元 素 名 、 属 性 和 值 。 
1. 元 素 


元 素 就 是 用 来 描述 网 页 不 同 部 分 的 标签 名 称 : 这 是 一 个 标题 ， 那 是 一 个 段落 ， 而 那 一 组 链接 是 一 但 | 
航 。 有 的 元 素 可 以 包含 一 个 或 多 个 属性 ， 属 性 用 来 进一步 描述 元 素 。 

大 多 数 标签 由 开始 标签 、 包 含 内 容 和 结束 标签 组 成 。 开 始 标签 是 放 在 一 对 尖 括 号 中 的 元 素 名 ， 以 及 可 
能 包含 的 属性 ， 结 束 标签 是 放 在 一 对 尖 括 号 中 的 斜 杠 加 元 素 名 。 例 如 : 


<em> 小 白 </em> 


回 开始 标签 : <em> 
回 ”内容 文 本 : 小 白 
回 ”结束 标签 : </em> 
这 是 一 个 典型 的 HIML 元 素 。 开 始 标签 、 结 束 标签 ， 以 及 包含 描述 元 素 的 文字 。 习 惯 上 ， 标 给 采用 小 | | 
写字 母 。 | 
还 有 一 些 元 素 是 空 元 素 ， 既 不 包含 文本 ， 也 不 包含 其 他 元 素 。 它们 看 起 来 像 是 开始 标签 和 结束 标签 的 | | 
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| 
| 
| 结合， 由 左 尖 括号 开头 ， 然 后 是 元 素 的 名 称 和 可 能 包含 的 属性 ， 接 着 是 一 个 可 选 的 空格 和 一 个 可 选 的 斜 杠 ， 
| 最 后 是 必 有 的 右 尖 括号 。 例如 : 
要 


<img src="images/xiaobai.jpg" width="50" alt=" 小 白 者 我 也 " 亡 
NOte | img 元 素 并 不 包含 任何 文本 内 容 。alt 属性 中 的 文字 是 元 素 的 一 部 分 , 并 非 显示 在 网 页 中 的 内 容 。 空 元 
[时 素 只 有 一 个 标签 ， 同 时 作为 元 素 的 开始 标签 和 结束 标签 使 用 。 
| 
| 次 提示 : 在 HIML5 中 ,结尾 处 的 空格 和 斜 杠 是 可 选 的 。 不 过 ， 最 后 面 的 “>” 是 必需 的 。 元 素 的 名 称 都 
用 小 写字 母 。 不 过 ，HTML5 对 此 未 做 要 求 ， 也 可 以 使 用 大 写字 母 。 除 非特 殊 需 要 ， 否 则 不 推荐 
使 用 大 写字 母 。 


2. 属性 和 值 

| 属性 包含 了 元 素 的 额外 信息 。 在 HTML5 中 ， 属 性 值 ( 参见 1.3.2 小 节 ) 两 边 的 引号 是 可 选 的 ,但 习惯 
| 上 建议 写 上 。 与 元 素 的 名 称 一 样 ， 尽 量 使 用 小 写字 母 编写 属性 的 名 称 。 例 如 : 

| <label for="email"> 电子 邮箱 </label> 

这 是 一 个 label 元 素 ( 关联 文本 标签 与 表单 字段 )。 属 性 总 是 位 于 元 素 的 开始 标签 内 ， 属 性 的 值 通常 放 


| 

| 

| 

| 在 一 对 引号 中 。 

| 元 素 ( 如 a 和 img) 可 以 有 多 个 属性 ， 每 个 属性 都 有 各 自 的 值 。 属 性 的 顺序 并 不 重要 。 不 同 的 “属性 / 
| 

| 

| 

| 


| 值 ” 对 之 间 用 空格 隔 开 。 例 如 : 
<a href="https://www.w3.0rg/TR/html5/" rel="external" title="HTMLS 参考 手册 ">HTML5</a> 


有 的 属性 可 以 接受 任何 值 ， 有 的 属性 则 有 限制 。 最 常见 的 是 那些 仅 接受 预定 义 值 ( 即 枚 举 值 ) 的 属性 。 
| 时 ， 用 户 必须 从 一 个 标准 列表 中 选 一 个 值 ， 枚 举 值 一 般 用 小 写字 母 编写 。 例 如 : 


<link rel="stylesheet" media="screen" href="style.css" /> 


| 

| 

| 用 户 只 能 将 link 元 素 的 media 属性 设 为 al、screen 、print 等 值 中 的 一 个 ， 不 能 像 href 属性 和 title 属性 
| 那样 可 以 输入 任意 值 。 

有 很 多 属性 的 值 需要 设置 为 数值 ， 特 别 是 那些 描述 大 小 和 长 度 的 属性 。 数 值 不 需要 包含 单位 ， 只 需 输 
| 入 数字 本 身 。 图 像 和 视频 的 宽度 和 高 度 是 有 单位 的 ， 默 认为 像素 。 
| 有 的 属性 (如 href 和 src ) 用 于 引用 其 他 文件 ， 它 们 只 能 包含 URL 形式 的 字符 串 值 。 
| 还 有 一 种 特殊 的 属性 称 为 布尔 属性 ( 参见 1.3.2 小 节 ), 这 种 属性 的 值 是 可 选 的 ， 因 为 只 要 这 种 属性 出 
现 就 表示 其 值 为 真 。 如 果 要 包含 一 个 值 ， 可 写 上 属性 名 本 身 。 布 尔 属性 也 是 预定 义 好 的 ， 无 法 自 创 。 例 如 : 
| <input type="email" name="emailaddr" required /> 
上 面 代码 提供 了 一 个 让 用 户 输入 电子 邮件 地 址 的 输入 框 。 布 尔 属 性 required 表示 用 户 必须 填写 该 输入 
| 框 。 布 尔 属性 不 需要 属性 值 ， 如 果 一 定 要 加 上 属性 值 ， 则 可 以 编写 为 required= “required”。 

| 3. 人 

| 如 果 一 个 元 素 包含 另 一 个 元 素 ， 它 就 是 被 包含 元 素 的 父 元 素 ， 被 包含 元 素 称 为 子 元 素 。 子 元 素 中 包含 
| 的 任 阿 元 素 才 是 外 民 的 公元 于 的 后 代 。 这 种 类 似 家 谱 结 构 是 HTML 代码 的 结构 特性 ， 它 有 助 于 在 元 素 上 添 
| 加 样式 和 应 用 JavaScript 行为 。 
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Ai 注意 : 当 元 素 中 包含 其 他 元 素 时 ， 每 个 元 素 都 必须 菊 套 正确 ， 也 就 是 子 元 素 必须 完全 被 包含 在 父 元 素 ， 
中 ， 不 能 把 子 元 素 的 结束 标签 放 在 外 面 。 例 如 : | 
<article> 
<hl> 小 白 自 语 </hl> 
<img src="images/xiaobaijpg" width="50" alt=" 小 白 者 ， 我 也 " /> 
<p> 我 是 <em> 小 白 </em>, 现在 准备 学 习 <a href="https://www.w3.0rg/TR/html5/" | 
rel="external" title="HTMLS 参考 手册 ">HTML5</a></p> | 
</article> | 
| 
| 


在 这 段 HTML 代码 中 ，article 元 素 是 hl 、img 和 了 元 素 的 父 元 素 。 反 过 来 ,hl 、img 和 p 元 素 是 article | 
元 素 的 子 元 素 ( 也 是 后 代 )。p 元 素 是 em 和 a 元 素 的 父 元 素 。em 和 a 元 素 是 p 元 素 的 子 元 素 ， 也 是 article | 
元 素 的 后 代 ( 但 不 是 子 元 素 )， 反 过 来 ，article 元 素 是 它们 的 祖先 元 素 。 | 


1.4.5 ”网 页 文本 内 容 


网 页 中 显示 的 文本 内 容 ， 就 是 元 素 中 包含 的 文本 ， 它 是 网 页 上 最 基本 的 构成 成 分 。 在 HTML 早期 版 本 | 
中 ， 只 能 使 用 ASCII 字符 集 。 | 
ASCII 字符 集 仅 包括 英语 字母 、 数 字 和 少数 几 个 常用 符号 。 开 发 人 员 必 须 用 特殊 的 字符 引用 来 创建 很 | 
多 日 常 符号 。 例 如 ，&nbsp; 表示 空格 ，&copy; 表示 版 权 符 号 @，&reg; 表示 注册 商标 符号 @ 等 。 完 整 列表 | 
请 参考 http://www.elizabethcastro.com/html/extras/entities.html。 | 


< 全 注意 : 浏览 器 在 呈现 HIML 页 面 时 ， 会 把 文本 内 容 中 的 多 个 空格 或 制 表 符 压缩 成 单个 空格 ， 把 回 车 符 
和 换行 符 转换 成 单个 空格 ， 或 者 和 忽略。 字符 引 用 也 替换 成 对 应 的 符号 ， 如 把 有 &copy; 显示 为 @。 
Unicode 字符 集 极 大 缓解 了 特殊 字符 的 显示 问题 。 使 用 UTF-8 对 页 面 进 行 编码 ， 并 用 同样 的 编 
码 保存 HTML 文件 已 成 为 一 种 标准 做 法 。 推 荐 在 网 页 中 将 charset 值 指定 为 UTF-8。HTML5 不 
区 分 大 小 写 ，UTF-8 和 utf-8 的 结果 是 一 样 的 。 


1.4.6 网 页 非 文 本 内 容 


在 网 页 中 除了 大 量 的 文本 内 容 外 ， 还 有 很 多 非 文 本 内 容 ， 如 图 像 、 链 接 、 视 频 、 音 频 等 。 从 网 页 外 引 
图 像 和 其 他 非 文 本 内 容 时 ， 浏 览 器 会 将 这 些 内 容 与 文本 一 起 显示 。 在 默认 情况 下 ， 链 接 文本 的 颜色 与 其 
他 文本 的 颜色 是 不 一 样 的 ， 而 且 还 带 有 下 画 线 。 

外 部 文件 ( 如 图 像 ) 实际 上 并 没有 存储 在 HIML 文件 中 ， 而 是 单独 保存 ， 页 面 只 是 简单 地 引用 了 这 些 
文件 。 例 如 : 
<article> 
<hl> 小 白 自 语 <hl> 
<img src="images/xiaobaijpg" width="50" alt=" 小 白 者 ， 我 也 " 记 
<p> 我 是 <em> 小 白 </em>, 现在 准备 学 习 <a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5 
参考 手册 ">HTML5</a></p> 
</article> 
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二 人 ciz 关 和 zi 开发 人 和 站 到 精通 (入 训 靖 克 县) 

| 

在 草本 HTML 文档 中 ， 有 一 个 对 因 像 文件 siaobaijpg 的 引用 (ing 元素 的 sr 属性 )， 浏览 在 加 载 页 
| 而 其 他 部 分 的 同时 ， 会 请 求 、 加 载 和 显示 这 个 图 像 。 访 页 面 还 包括 一 个 指向 关于 HTMLS 参考 页 面 的 链接 
| (a 元 素 的 href 属性 )。 

| 测 鉴 器 可 以 处 理 图 像 和 链接 ， 不 过 无 法 处 理 其 他 文件 类 型 。 例 如 ， 对 于 一 般 浏览 各 来 阅 ， 要 查看 PDF 

pT 格式 的 外 部 文件 ， 就 需要 在 系统 中 预先 安装 好 Adobe Readers 要 查看 电子 表格 ， 就 需要 预先 安装 好 Open 
| office 等 软件 。 早 期 HTML 没有 内 普 的 方法 播放 视频 和 音频 文件 ， 各 软件 厂商 都 开发 出 相应 的 软件 ， 用 户 
| 可 以 下 载 并 安装 这 些 软件 ， 从 而 弥补 浏览 器 缺失 的 功能 。 这 样 的 软件 称 为 插件 。 
| 在 浏 览 器 插件 中 。 使 用 最 为 广泛 的 是 Flash。 多 年 以 米 ，Flash 插件 是 播放 网 页 视频 必 备 的 工具 。 不 过 ， 
| 这 个 插件 也 有 一 些 问题 ， 如 它 会 耗费 较 多 的 计算 资源 。HTMLS 新 增加 了 audio 和 video 元 素 ， 无 需 使 用 插 
| 件 就 可 以 播放 视频 和 音频 了 。 不 过 ， 现 代 浏览 器 也 提供 了 内 轩 的 媒体 播放 器 ， 用 户 仍然 可 以 使 用 Flash 播放 
器 作 为 旧 浏 览 器 的 备用 工具 。 


1.5 案例 实战 


目前 最 新 主流 浏览 器 对 HTML5 都 提供 了 很 好 的 支持 ， 下 面 结合 示例 介绍 如 何 正确 创建 HTML5 文档 。 


1.5.1 编写 第 一 个 HTML5 文档 


本 节 示 例 将 遵循 HTML5 语法 规范 编写 一 个 文档 。 本 例文 档 省 略 了 html、head、body 等 元 素 , 使 用 

| HIML5 的 DOCTYPE 声明 文档 类 型 ， 简 化 meta 元 素 的 charset 属性 设置 ， 省 略 P 元 素 的 结束 标签 ， 使 用 

| < 元 素 这 的 方式 来 结束 br 元 素 等 。 

| <IDOCTYPE html> 

<meta charset="UTF-8"> 

<title>HTMLS5 基本 语法 </title> 

<hl>HTMLS 的 目标 </hl> 

<p>HTML5 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代码 。 

<br> 例如 ， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 HTML 变 得 更 简洁 ， 开 发 出 了 新 
的 属性 、 新 的 元 素 等 。 总 体 来 说 ,为 下 一 代 Web 平台 提供 了 许 许多 多 新 的 功能 。 


这 段 代码 在 正 浏览 器 中 的 运行 结果 如 图 1.3 所 示 


HTMLS 的 目标 
MD 5 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程 序 ， 书 写 出 更 简洁 的 HTML 代 


例如 ， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 
HTML 变 得 更 简洁 ， 开 发 出 了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 
Web 平 台 提供 了 许 许多 多 新 的 功能 。 


| 
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图 1.3 编写 HTML5 文档 
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| 
| 
通过 短 短 几 行 代码 就 完成 了 一 个 页 面 的 设计 ， 这 充分 说 明了 HIMLS 语法 的 简洁 。 同 时 ，HTML5 不 是 ， 
一 种 XML 语言 ， 其 语法 也 很 随意 ， 下 面 从 这 两 方面 进行 逐 句 分 析 。 | 
第 一 行 代码 如 下 。 | 
<IDOCTYPE html> | 


不 需要 包括 版 本 号 ， 仅 告诉 浏览 器 需要 一 个 DOCTYPE 来 触发 标准 模式 ， 可谓 简明 扼要 。 Note 
接 下 来 说 明文 档 的 字符 编码 ， 否 则 将 出 现 浏览 器 不 能 正确 解析 的 情况 。 


| 
<meta charset="utf-8"> | 
同样 也 很 简单 , HTML5 不 区 分 大 小 写 ， 不 需要 标记 结束 符 ， 不 介意 属性 值 是 否 加 引号 ， 即 下 列 代码 是 | 


| 
| 
<meta charset="utf-8"> | 
<META charset="utf-8" /> | 
| 
| 


<META charset=utf-8> 


在 主体 中 ， 可 以 省 略 主体 标记 ， 直 接 编写 需要 显示 的 内 容 。 虽 然 在 编写 代码 时 省 略 了 html、head 和 | 
body 元 素 ， 但 在 浏览 器 进行 解析 时 ， 将 会 自动 进行 添加 。 但 是 ,考虑 到 代码 的 可 维护 性 ， 在 编写 代码 时 ，| 
应 该 尽量 增加 这 些 基本 结构 元 素 。 | 


1.5.2 比较 HTML4 与 HTML5 文档 结构 


下 面 通过 示例 具体 说 明 HTMLS 是 如 何 使 用 全 新 的 元 素 编写 网 页 的 。 | 

【示例 1】 本 例 设计 将 页 面 分 成 上 、 中 、 下 3 部 分 : 上 面 显示 网 站 标题 ; 中 间 分 两 部 分 ， 左 侧 为 辅助 栏 ，| 
右 侧 显示 网 页 正文 内 容 ; 下 面 显示 版 权 信 息 ， 如 图 1.4 所 示 。 使 用 HIML4 构建 文档 基本 结构 如 下 。 

<div id="header">[ 标题 栏 ]</div> 

<div id="aside">[ 侧 边 栏 ]</div> 

<div id="article">[ 正文 内 容 ]</div> 

<div id="footer">[ 页 脚 栏 ]</div> 


图 1.4 简单 的 网 页 布局 
尽管 上 述 代码 不 存在 任何 语法 错误 ， 也 可 以 在 HTML5 中 很 好 地 解析 ， 但 该 页 面 结构 对 于 浏览 器 来 说 
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是 不 
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具有 区 分 度 的 。 对 于 不 同 的 用 户 来 说 ，ID 命名 可 能 因 人 而 异 ， 这 对 浏览 器 来 说 ， 就 无 法 辨别 每 个 div 


| 元 素 在 页 面 中 的 作用 ， 因 此 也 必然 会 影响 其 对 页 面 的 语义 解析 。 


【示例 2】 下 面 使 用 HIMLS 新 增 元 素 重新 构建 页 面 结构 ， 明 确定 义 每 部 分 在 页 面 中 的 作用 。 


<header>[ 标题 栏 ]</header> 
<aside>[ 侧 边栏 ]</aside> 
<article>[ 正文 内 容 ]</article> 
<footer>[ 页 脚 栏 ]</footer> 


虽然 两 段 代 码 不 一 样 ,但 比较 上 述 两 段 代码 ,使 用 HTMLS5 新 增 元 素 创建 的 页 面 代码 更 简洁 、 明 晰 。 


| 没有 任何 语义 ， 浏 览 器 也 不 能 根据 标记 的 ID 名 称 来 推断 它 的 作用 ， 因 为 ID 名 称 是 随意 变化 的 。 


而 HIML5 新 增 元 素 header， 明 确 地 告诉 浏览 器 此 处 是 页 头 ，aide 元 素 用 于 构建 页 面 辅助 栏目 ，article 


用 于 构建 页 面 正文 内 容 ，footer 元 素 定义 页 脚注 释 内 容 。 这 样 极 大 地 提高 了 开发 者 的 便利 性 和 浏览 器 的 
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( 鳃 4 视频 讲解 : 1 小 时 1 分 钟 ) 


CSS3 在 CSS 2.1 基础 上 新 增 了 很 多 功能 ， 如 圆 角 、 阴 影 、 多 图 背景 、 渐 变 背 景 、 
弹性 布局 、 变 形 、 动 画 、 设 备 响 应 等 。 本 章 先 简单 介绍 CSS3 的 基本 概念 ， 然 后 重点 讲 
解 CSS3 选择 器 ， 它 可 以 让 设计 师 更 方便 地 定义 样式 ， 减 少 对 HIML 结构 的 依赖 ， 使 
CSS 代码 更 简洁 。 


【学 习 重 点 】 

了 了解 CSS 发 展 历史 。 

WI 熟悉 CSS 基本 语法 和 用 法 。 
WI 灵活 使 用 CSS 选择 器 。 

PI 了解 CSS 基本 将 性 。 


[7Mss 各 二 Wit 开发 及 入门 到 将 胡 ( 蕉 课 将 病 及 ) 


2.1 CSS3 概述 


CSS ( Cascading Style Sheet， 层 匡 样 式 表 )， 定 义 如 何 泻 染 HTML 元 素 ， 设计 网 页 显示 效果 。 使 


| 可 以 实现 网 页 内 容 与 表现 的 分 离 ， 以 便 提 升 网 页 执行 效率 ,方便 后 期 管理 和 代码 维护 。 


Css 


| 1996 年 12 月 , CSS1 正式 出 版 (http://www.w3.org/TR/CSS1/); 1998 年 5 月 ，CSS2 版 本 正式 出 版 
| (http://www.w3.0rg/TR/CSS2/ )- 


Ey 
[is s 
权威 参考 权威 参考 
CSS1 CSS2 


CSS3 的 开发 工作 在 2000 年 之 前 就 已 经 开始 ， 但 各 方 博弈 时 间 太 久 ，2002 年 W3C 启动 了 CSS 2.1 的 开 
发 ， 这 是 CSS2 的 修订 版 ， 它 纠正 了 CSS2 版 本 中 的 一 些 缺陷 ， 更 精确 地 描述 了 CSS 的 浏览 器 实现 ，2004 
| 年 CSS 2.1 正式 发 布 ， 到 2006 年 年 底 得 到 完善 ， 它 成 为 浏览 器 支持 最 完整 的 版 本 。 为 了 方便 各 主流 浏览 器 
| 根据 需要 渐进 式 支持 ，CSS3 按 模块 化 进行 全 新 设计 ， 这 些 模块 可 以 独立 发 布 和 实现 ， 这 也 为 日 后 CSS 的 


扩展 黄 定 了 基础 。 


到 目前 为 止 ，CSS3 还 没有 推出 正式 的 完整 版 ， 但 是 已 经 陆续 推出 了 不 同 的 模块 ， 这 些 模块 已 经 被 大 间 


| 分 浏览 器 支持 或 部 分 实现 。 


CSS3 属性 支持 情况 请 访问 http://fmbip.conylitmus/ 详细 了 解 。 可 以 看 出 ， 完 全 支持 CSS3 属性 的 浏览 器 


包括 Chrome 和 Safari， 其 他 主流 浏览 器 也 基本 支持 。 


CSS3 选择 器 支持 情况 请 访问 http://fmbip.conylitmus/ 详细 了 解 。 除 了 正 早期 版 本 和 Firefox 3， 其 他 主 


流 浏览 器 几乎 全 部 支持 ， 如 Chrome、Safari 、Firefox 、Opera。 


次 提示 : 部 分 浏览 器 允许 使 用 私有 属性 支持 CSS3 的 新 特性 ， 简 单 说 明 如 下 。 
Webkit 类 型 浏览 器 ( 如 Safari、Chrome ) 的 私有 属性 是 以 -webkit- 前 组 开始 。 
回 Gecko 类 型 的 浏览 器 ( 如 Firefox ) 的 私有 属性 是 以 -moz- 前 缓 开始 。 
Konqueror 类 型 的 浏览 器 的 私有 属性 是 以 -khtml- 前 组 开始 。 
回 Opera 浏览 器 的 私有 属性 是 以 -0- 前 缓 开始 。 
回 Internet Explorer 浏览 器 的 私有 属性 是 以 -ms- 前 缓 开始，IE8+ 支持 -ms- 前 组 。 


2.2 CSS3 基本 用 法 


CSS3 也 是 一 种 标记 语言 ， 可 以 在 任何 文本 编辑 器 中 编辑 。 下 面 简单 介绍 CSS3 的 基本 用 法 。 
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2.2.1 CSS 样式 


CSS 的 语法 单元 是 样式 ， 每 个 样式 包含 两 部 分 内 容 : 选择 器 和 声明 ( 或 称 为 规则 )， 如 图 2.1 所 示 。 


选择 符 ”样式 分 隔 符 声明 声明 样式 分 阳 符 Note 


font-size : 14px; color :#000; 


网 页 标签 名 属性 ”属性 值 属性 ”属性 值 
图 2.1 CSS 样式 基本 格式 


回 选择 器 ( Selector ): 指定 样式 作用 于 哪些 对 象 ， 这 些 对 象 可 以 是 某 个 标签 、 指 定 Class 或 JP 值 的 元 | 
素 等 。 浏 览 器 在 解析 这 个 样式 时 ， 根 据 选择 器 来 泻 染 对 象 的 显示 效果 。 

回 声明 (Pen 指定 浏览 器 如 何 泻 染 选择 器 匹配 的 对 象 。 声 明 包 括 两 部 分 : 属性 和 属性 值 ， 并 | 
用 分 号 来 标识 一 个 声明 的 结束 ， 在 一 个 样式 中 的 最 后 一 个 声明 可 以 省 略 分 号 。 所 有 声明 被 放置 在 | | 
一 对 大 括号 内 ， 然后 位 于 选择 器 的 后 面 。 | 

加 属性 (Property ): CSS 预 设 的 样式 选项 。 属 性 名 是 由 一 个 或 多 个 单词 组 成 ， 多 个 单词 之 间 通 过 连 字 
符 相连 。 这 样 能 够 很 直观 地 了 解 属性 所 要 设置 样式 的 类 型 。 | 

| 

| 


加 属性 值 (Value ): 定义 显示 效果 的 值 ， 包 括 值 和 单位 ， 或 者 仅 定义 一 个 关键 字 。 

【示例 】 下 面 的 示例 简单 演示 了 如 何在 网 页 中 设计 CSS 样式 。 

第 1 步 ， 启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml。 

第 2 步 ， 在 <head> 标签 内 添加 <style type="text/ess"> 标签 ， 定 义 一 个 内 部 样式 表 。 

第 3 步 ， 在 <style> 标签 内 输入 下 面 的 样式 代码 ， 定 义 网 页 字体 大 小 为 24 像素 ,字体 颜色 为 白色 。 
body {font-size: 24px: color: #fff:} 

第 4 步 , 输入 下 面 的 样式 代码 ， 定 义 段落 文本 的 背景 色 为 蓝 色 。 

Pp { background-color: #00F: } 

第 5 步 , 在 <body> 标签 内 输入 下 面 一 行 代码 ， 然 后 在 浏览 器 中 预览 ,效果 如 图 2.2 所 示 。 
<p> 葛 等 亲 、 白 了 少年 头 ， 空 翡 切 。 </p> 


ew el 1 


图 2.2 使 用 CSS 定义 段落 文本 样式 
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| 
| 
| 
| 
1222 引入 CSS 样式 
| 在 网 页 中 ， 有 3 种 方法 可 以 正确 引入 CSS 样式 ， 让 浏览 器 能 够 识别 和 解析 。 


回 行内 样式 
eg 把 CSS 样式 代码 置 于 标签 的 style 属性 中 ， 例 如 : 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


<span style="color:red:"> 红色 字体 </span> 
<div style="border:solid 1px blue: width:200px: height:200px:"></div> 


这 种 用 法 没有 真正 把 HTML 结构 与 CSS 样式 分 离 ， 一 般 不 建议 大 规模 使 用 。 除 非 为 页 面 中 某 个 元 素 临 
时 设置 特定 样式 。 
回 内 部 样式 
<style type="text/css"> 
body {/* 页 面 基本 属性 */ 
font-size: 12px; 
color: #CCCCCC; 


} 

让 段落 文本 基础 属性 */ 

Pp {background-color: #FFOOFF:; } 
</style> 


把 CSS 样式 代码 放 在 <style> 标签 内 。 这 种 用 法 也 称 为 网 页 内 部 样式 。 该 方法 适合 为 单 页 面 定义 CSS 
样式 ， 不 适合 为 一 个 网 站 或 多 个 页 面 定义 样式 。 
| 内 部 样式 一 般 位 于 网 页 的 头 部 区 域 ， 目 的 是 让 CSS 源 代码 早 于 页 面 源 代码 下 载 并 被 解析 ， 避 免 当 网 页 
| 下 载 之 后 ， 还 无 法 正常 显示 。 
| 回 外 部 样式 

把 样式 放 在 独立 的 文件 中 ， 然 后 使 用 <link> 标签 或 者 @import 关键 字 导 入 。 一 般 网 站 都 采用 这 种 方法 
来 设计 样式 ， 真 正 实现 HTML 结构 和 CSS 样式 的 分 离 ， 以 便 统 筹 规划 、 设 计 、 编 辑 和 管理 CSS 样式 。 


样式 表 是 一 个 或 多 个 CSS 样式 组 成 的 样式 代码 段 。 样 式 表 包 括 内 部 样式 表 和 外 部 样式 表 ， 它 们 没有 本 
Ea 只 是 存放 位 置 不 同 。 

内 部 样式 表 包 含 在 <style> 标签 内 ,一 个 <style> 标签 就 表示 一 个 内 部 样式 表 。 而 通过 标签 的 style 属性 
定义 的 样式 属性 不 是 样式 表 。 如 果 一 个 网 页 文档 中 包含 多 个 <style> 标签 ， 就 表示 该 文档 包含 了 多 个 内 部 样 
| 式 表 。 
| 如 果 CSS 样式 被 放置 在 网 页 文档 外 部 的 文件 中 ， 则 称 为 外 部 样式 表 ， 一 个 CSS 样式 表 文 档 就 表示 一 个 
| 外 部 样式 表 。 实 际 上 ， 外 部 样式 表 也 就 是 一 个 文本 文件 ， 其 扩展 名 为 .css。 当 把 不 同 的 样式 复制 到 一 个 文本 
| 文件 中 后 ， 另 存 为 .css 文件 ， 则 它 就 是 一 个 外 部 样式 表 。 
在 外 部 样式 表 文件 项 部 可 以 定义 CSS 源 代码 的 字符 编码 。 例 如 ， 下 面 的 代码 定义 样式 表 文件 的 字符 编 
| 码 为 中 文 简体 。 
| 


ge CSS 样式 表 
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@charset "gb2312"; 


如 果 不 设置 CSS 
CSS 代码 。 


文件 的 字符 编码 ， 可 以 保留 默认 设置 ， 则 浏览 器 会 根据 HTML 文件 的 字符 编码 来 解析 


2.2.4 ”导入 外 部 样式 表 


外 部 样式 表 文 件 可 以 通过 两 种 方法 导入 HTML 文档 中 。 
1. 使 用 <link> 标签 
使 用 <link> 标签 导入 外 部 样式 表 文 件 的 代码 如 下 。 


<link href="001.css' 


" rel="stylesheet" type="text/css" /> 


该 标签 必须 设置 的 属性 说 明 如 下 。 
回 href: 定义 样式 表 文件 URL。 
回 rel: 用 于 定义 文档 关联 ， 这 里 表示 关联 样式 表 。 


回 type: 定义 导 
2. 使 用 @import 


入 文件 类 型 ， 同 style 元 素 一 样 。 
命令 


在 <style> 标签 内 使 用 @import 关键 字 导 入 外 部 样式 表 文件 的 方法 如 下 。 


<style type="text/css"> 
@import url( “001.css"); 


</style> 


在 @import 关键 字 后 面 ， 利 用 url0 函数 包含 具体 的 外 部 样式 表 文 件 的 地 址 。 


2.2.5 CSS 格式 化 


在 CSS 中 增加 注 
族 注 释 */ 

或 

A 


注释 
ul 


化 排版 ， 以 方便 阅读 和 管理 。 


2.2.6 CSS 属性 


释 很 简单 ， 所 有 被 放 在 “/*” 和 “%/” 分 隔 符 之 间 的 文本 信息 都 被 称 为 注释 。 例 如 : 


CSS 属性 众多 ， 在 W3C CSS2 版 本 中 共有 122 个 标准 属性 ( http://www.w3.org/TR/CSS2/propidx.html )， 


在 W3C CSS2.1 版 本 中 


h 共 有 115 个 标准 属性 (http://www.w3.org/TR/CSS21/propidx.html )， 其 中 删除 了 CSS2 | 


版 本 中 7 个 属性 : font-size-adjust、font-stretch、marker-offset、marks、page 、size 和 text-shadow。 在 W3C | 
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| CSS3 版 本 中 又 新 增加 了 20 多 个 属性 ( http://www.w3.org/Style/CSS/current-work#CSS3 )。 
本 节 不 准备 逐个 介绍 每 个 属性 的 用 法 ， 我 们 将 在 后 面 各 章节 中 详细 说 明 ， 读 者 也 可 以 参考 CSS3 参考 
手册 具体 了 解 。 


2.2.7 CSS 属性 值 


CSS 属性 取 值 比较 多 ， 具 体 类 型 包括 长 度 、 角 度 、 时 间 、 频 率 、 布 局 、 分 辨 率 、 颜 色 、 文 本 、 函 数 、 
| 生成 内 容 、 图 像 和 数字 。 常 用 的 是 长 度 值 ， 其 他 类 型 值 将 在 相应 属性 中 具体 说 明 。 

| 下 面 重点 介绍 一 下 长 度 值 ， 它 包括 以 下 两 类 。 
| 
| 
| 
| 


1. 绝对 值 

绝对 值 在 网 页 中 很 少 使 用 ， 一 般 用 在 特殊 的 场合 。 常 见 绝对 单位 如 下 。 
英寸 (h): 使 用 最 广泛 的 长 度 单位 。 

| 厘米 (cm ): 最 常用 的 长 度 单位 。 

| 毫米 (mm ): 在 研究 领域 使 用 广泛 。 

磅 (pt): 也 称 点 ， 在 印刷 领域 使 用 广泛 。 
| pica (pc ): 在 印刷 领域 使 用 。 

2. 相对 值 
| 

| 

| 


办 办 办 办 罗 


根据 屏幕 分 辨 率 、 可 视 区 域 、 浏 览 器 设置 以 及 相关 元 素 的 大 小 等 因素 确定 值 的 大 小 。 常 见 相 对 单位 包 
括 如 下 4 个 。 
回 em 
em 表示 字体 高 度 ， 它 能 够 根据 字体 的 font-size 值 来 确定 大 小 ， 例 如 : 
PH* 设置 段落 文本 属性 */ 
font-size: 12px: 
line-height:2em;/* 行 高 为 24px*/ 
} 


| 

| 

| 

| 从 上 面 样式 代码 中 可 以 看 出 : lem 等 于 font-size 的 属性 值 ， 如 果 设 置 font-size:12pt， 则 line-height:2em 
| 就 会 等 于 24pt。 如 果 设置 font-size 属性 的 单位 为 em， 则 em 的 值 将 根据 父 元 素 的 font-size 属性 值 来 确定 。 
例如 ， 定 义 如 下 HTML 局 部 结构 。 

| <div id="main"> 

| <p>em 相对 长 度 单位 使 用 </p> 

| </div> 

| 

| 再 定义 如 下 样式 。 

| #main { font-size:12px:} 

| PP {font-size:2em;} 上 # 字体 大 小 将 显示 为 24px*/ 

| 
| 
| 
| 
| 
| 
| 
| 


同 理 ， 如 果 父 元 素 的 font-size 属性 的 单位 也 为 em， 则 将 依次 向 上 级 元 素 寻 找 参考 的 font-size 属性 值 ， 
如 果 都 没有 定义 ， 则 会 根据 浏览 器 默认 字体 大 小 进行 换算 , 默认 字体 大 小 一 般 为 16px。 

区 未 

ex 表示 字母 x 的 高 度 。 


DD 
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| 
| 
| 
| 
回 px | 
px 根据 屏幕 像素 点 来 确定 大 小 。 这 样 不 同 的 显示 分 辩 率 就 会 使 相同 取 值 的 px 单位 所 显示 出 来 的 效果 
截然 不 同 。 | 
回 % 
百分比 也 是 一 个 相对 单位 值 。 百 分 比值 总 是 通过 另 一 个 值 来 确定 当前 值 ， 一 般 参 考 父 元 素 中 相同 属性 | 
的 值 。 例 如 ， 如 果 父 元 素 宽度 为 500px， 子 元 素 的 宽度 为 50%， 则 子 元 素 的 实际 宽度 为 250px。 | 


Note 


2.3 元 素 选择 器 
元 素 选择 器 包括 标签 选择 器 、 类 选择 器 、ID 选择 器 和 通 配 选 择 器 。 
2.3.1 标签 选择 器 


标签 选择 器 也 称 为 类 型 选择 器 ， 它 直接 引用 HTML 标签 名 称 ， 用 来 匹配 同名 的 所 有 标签 。 
优点 : 使 用 简单 ， 直 接 引用 ， 不 需要 为 标签 添加 属性 。 
加 缺点: 匹配 的 范围 过 大 ， 精 度 不 够 。 
因此 ， 一 般 常 用 标签 选择 器 重 置 各 个 标签 的 默认 样式 。 

【示例 】 下 面 的 示例 统一 定义 网 页 中 段落 文本 的 样式 为 : 段落 内 文本 字体 大 小 为 12 像素 ， 字体 关外 为 
红色 。 实 现 该 效果 ， 可 以 考虑 选用 标签 选择 器 定义 如 下 样式 。 | 


p{ 
font-size:12px; 诺 字 体 大 小 为 12 像素 */ 
color:red: 让 字体 颜色 为 红色 */ 
} 
2.3.2 ”类 选择 器 


类 选择 器 以 点 号 ( . ) 为 前 级 ， 后 面 是 一 个 类 名 。 应 用 方法 : 在 标签 中 定义 class 属性 ， 然后 设置 属性 值 
回 优点 : 能 够 为 不 同 标签 定义 相同 样式 ; 使 用 灵活 ， 可 以 为 同一 个 标签 定义 多 个 类 样式 。 

回 ”缺点 : 需要 为 标签 定义 class 属性 ， 影 响 文 档 结构 ， 操 作 相对 麻烦 。 

【示例 】 下 面 的 示例 演示 了 如 何在 对 象 中 应 用 多 个 样式 类 。 

第 1 步 ， 新 建 HIML5 文档 ， 保 存 为 testhtml。 

第 2 步 ， 在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定 义 一 个 内 部 样式 表 。 

第 3 步 ， 在 <style> 标签 内 输入 下 面 的 样式 代码 ， 定 义 3 个 类 样式 : red、underline 和 italic。 


入 颜色 类 */ 

-Ted { color red: } 庆 红 色 所 

族 下 夯 线 类 */ 

.underline { text-decoration: underline: } 伴 下 画 线 拟 | 
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让 斜体 类 */ 
:italic { font-style: italic: } 


a 7Mis 各 二 Wet 开发 及 入门 到 将 胡 ( 蕉 课 靖 病 及 ) 


第 4 步 ， 在 段落 文本 中 分 别 引 用 这 些 类 ， 其 中 第 2 段 文本 标签 引用 了 3 个 类 样式 ， 演 示 效 果 如 图 2.3 


| 所 示 。 


<p class="underline"> 问 君 能 有 几 多 愁 ， 恰 似 一 江 春水 向 东 流 。</p> 
<p class="red italic underline"> 剪 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋味 在 心头 。</p> 


<p class="italic"> 独自 莫 赁 栏 ， 无 限 江山 ， 别 时 容易 见 时 难 。 流 水 落花 春 去 也 ， 天 上 人 间 。</p> 


加 天 襄 有 几 多 球 ， 恰 似 一 江 奏 水 向 东 流 ， 


可 下 靳 ， 娃 水 型 ， 度 语 笑 。 到 关 一 般 凡 队 冰 心头。 
其 局 同 壬 个 ， 无 帮 芝 纱 ， 届 内 弥 每 届 风 矢 ， 洲 次 许 兴 着 去 动 ， 无 上 人 疝 . 


图 2.3 多 类 应 用 效果 


2.3.3 ID 选择 器 
ID 选择 器 以 井 号 (# ) 为 前 级 ， 后 面 是 一 个 ID 名 。 应 用 方法 : 在 标签 中 定义 这 属性 ， 
为 ID 选择 器 的 名 称 。 
回 优点 : 精准 匹配 。 
回 ”缺点 : 需要 为 标签 定义 id 属性， 影响 文档 结构 ， 相 对 于 类 选择 器 ， 缺 乏 灵活 性 。 
【示例 】 下 面 的 示例 演示 了 如 何在 文档 中 应 用 ID 选择 器 。 
第 1 步 ， 启动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标签 内 输入 <div> 标签 。 
<div id="box"> 问 君 能 有 几 多 愁 ， 恰 似 一 江 春水 向 东 流 。</div> 
第 2 步 ， 在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定 义 一 个 内 部 样式 表 。 
第 3 步 ， 输 入 下 面 的 样式 代码 ， 为 id 属性 值 为 box 的 元 素 定义 固定 的 宽 和 高 ， 并 设置 


| 边框 和 内 边 距 大 小 。 


#box {l* ID 样式 */ 
background:url(images/1.png) center bottom: ”性 定 义 背 景 图 像 并 居中 、 底 部 对 齐 */ 


height:200px: 记 固定 的 高 度 */ 

width:400px: 让 固定 的 宽度 */ 

border:solid 2px red: 方 边框 样式 */ 

padding: 100px: 启 增 加 内 边 距 */ 
} 


第 4 步 ， 在 浏览 嚣 中 预览 ,效果 如 图 2.4 所 示 。 
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然后 设置 属性 值 


背景 图 像 ， 以 及 
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图 2.4 ID 选择 器 的 应 用 


党 提示 :不 管 是 类 选择 器 ， 还 是 选择 器 ， 都 可 以 指定 一 个 限定 标签 名 ， 用 于 限定 它们 的 应 用 范围 。 例如 ， 


针对 上 面 的 示例 ， 在 外 选择 器 前 面 增加 一 个 div 标签 ， 这 样 div#box 选择 器 的 优先 级 会 大 于 孝 ox 


选择 器 的 优先 级 。 在 同等 条 件 下 ， 浏 览 器 会 优先 解析 div#box 选择 器 定义 的 样式 。 对 于 类 选择 器 ， | 
也 可 以 使 用 这 种 方式 限制 类 选择 器 的 应 用 范围 ， 并 增加 其 优先 级 。 | 


2.3.4 通 配 选 择 器 


通 配 选 择 器 使 用 星 号 (* ) 表 


%， 用 来 匹配 文档 中 的 所 有 标签 


【示例 】 使 用 下 面 的 样式 可 以 清除 所 有 标签 的 边 距 


* { margin: 0; padding: 0: } 


2.4 关系 选择 器 


当 把 两 个 简单 的 选择 器 组 合 在 一 起 ， 就 形成 了 一 个 复杂 的 关系 选择 器 ， 


HIML 结构 中 特定 范围 的 元 素 


2.4.1 包含 选择 器 


回 优点 : 可 以 缩小 匹配 范围 


四 缺点 : 匹配 范围 相对 较 大 ， 影 响 的 层级 不 受 限 制 。 


9 
视频 讲解 | 


通过 关系 选择 器 可 以 精确 匹配 


包含 选择 器 通过 空格 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 表示 包含 的 元 素 ， 后 面 选择 器 表示 被 包含 的 元 素 。 | 


【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 在 <body> 标签 内 输入 如 下 代码 。 | 


<div id="wrap"> 
<div id="header"> 
<p> 头 部 区 域 段落 文本 </p> 
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<p> 主体 区 域 段落 文本 </p> 


在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定义 一 个 内 部 样式 表 。 然 后 定义 样式 ,希望 实现 如 


| 下 设计 目标 。 


回 定义 <div id="header"> 包含 框 内 的 段落 文本 字体 大 小 为 14 像素 。 
回 定义 <div id="main"> 包含 框 内 的 段落 文本 字体 大 小 为 12 像素 。 
这 时 可 以 利用 包含 选择 器 来 快速 定义 样式 ， 代 码 如 下 。 

#header p { font-size:14px:} 

#main p {font-size: 12px:} 


2.4.2” 子 选择 器 


子 选择 器 使 用 尖 角 号 (> ) 连接 两 个 简单 的 选择 器 ， 前 面 选 择 器 表示 包含 的 父 元 素 ， 后 面 选 择 器 表示 被 
包含 的 子 元 素 。 

加 优点: 相对 包含 选择 器 ， 匹 配 的 范围 更 小 ， 从 层级 结构 上 看 ， 匹 配 目标 更 明确 。 

回 ”缺点 : 相对 于 包含 选择 器 ， 匹 配 范围 有 限 ， 需 要 熟悉 文档 结构 。 

【示例 】 新 建 网 页 ， 在 <body> 标签 内 输入 如 下 代码 。 

<h2><span> 虞 美人 春花 秋月 何 时 了 </span></h2> 

<div><span> 春花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 

颜 改 。 问 君 能 有 几 多 愁 ? 恰似 一 江 春 水 向 东 流 。 </span></div> 


在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 在 内 部 样式 表 中 定义 所 有 span 元 素 的 字体 大 小 为 
18 像素 ， 再 用 子 选择 器 定义 h2 元 素 包含 的 span 子 元 素 的 字体 大 小 为 28 像素 。 


span { font-size: 18px: } 
h2 > span { font-size: 28px: } 


在 浏览 器 中 预览 ， 显 示 效果 如 图 2.5 所 示 。 


Se - 
虞 美人 :春花 秋月 何 时 了 


春花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 
回首 月 明 中 。 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 
悉 ? 恰似 一 江 春 水 向 东 流 。 


图 2.5 子 选择 器 应 用 
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2.4.3” 相 邻 选择 器 
相 邻 选择 器 使 用 加 号 (+ ) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 指定 相 邻 的 前 面 一 个 元 素 ， fii 
指定 相 邻 的 后 面 一 个 元 素 。 A 


加 优点 : 在 结构 中 能 够 快速 、 准 确 地 找到 同 级 、 相 邻 元 素 。 

缺点 : 使 用 前 需要 熟悉 文档 结构 。 | 

【示例 ] 下 面 的 示例 通过 相 邻 选择 器 快速 匹配 出 标题 下 面相 邻 的 p 元 素 ， 并 设计 其 包含 的 文本 居中 显示 ，| 
效果 如 图 2.6 所 示 。 | 


| 
| 

| 

| 

| 

| 

<style type="text/css"> | 
h2.h2 +p { text-align: center: } | 
</style> | 
<h2> 虞 美人 春花 秋月 何 时 了 </h2> | 
<p> 李煜 </p> | 
<p> 春花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 </p> | 
<p> 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 愁 ? 恰似 一 江 春水 向 东 流 。 </p> 
| 

| 

| 

| 

| 

| 

| 


上 氏 美 人 .春花 秋月 何 时 了 


李 烛 
雁 花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 示 风 ， 故 国 不 塔 回首 月 明 中 。 
赂 栏 玉 砌 应 詹 在 ， 只 是 朱 彰 改 ， 问 如 能 有 几 多 悉 ? 忙 似 一 江 春 水 向 东 流 。 


图 2.6 相 邻 选择 器 的 应 用 
如 果 不 使 用 相 邻 选择 器 ， 用 户 需要 使 用 类 选择 器 来 设计 ， 这 样 就 相对 麻烦 很 多 。 


2.4.4 兄弟 选择 器 


兄弟 选择 器 使 用 波浪 符号 ( ~ ) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 指定 同 级 的 前 置 元 素 ， 后 面 选择 
器 指定 其 后 同 级 所 有 匹配 的 元 素 。 

回 优点 : 在 结构 中 能 够 快速 、 准 确 地 找到 同 级 靠 后 的 元 素 。 

回 缺点: 使 用 前 需要 熟悉 文档 结构 ， 匹 配 精度 没有 相 邻 选择 器 具体 。 

【示例 】 以 上 节 示 例 为 基础 ， 添 加 如 下 样式 ， 定 义 标题 后 面 所 有 段落 文本 的 字体 大 小 为 14 像素 ， a 
颜色 为 红色 。 


h2 ~ p {font-size: 14px: colorred: } 


在 浏览 器 中 预览 ， 页 面 效 果 如 图 2.7 所 示 。 可 以 看 到 兄弟 选择 器 匹配 的 范围 包含 了 相信 选择 器 本 的 
元 素 。 


sa 


a 了 Hei 关 和 zu 开发 人 和 站 到 精通 (入 吝 靖 确 且 ) 


< EPED FT > 
康美 人 -春花 秋月 何 时 了 


二 


于 秋 月 全 了 ? 柱 字 知 多 少 。 十 村 刘 艳 只 示 风 ， 大 国 不 堪 回 半月 明 中 - 
其 术 玉 大 频 入 在 ， 只 是 朱 孝 次 。 问 于 能 有 多 黎 ? 性 一 江 寺 水 向 东 流 - 


| 图 2.7 兄弟 选择 器 的 应 用 
2.4.5 “分 组 选择 器 


分 组 选 择 器 使 用 去 号 (,) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 匹配 的 元 素 与 后 面 选择 器 匹配 的 元 素 混 
| 合 在 一 起 作为 分 组 选择 器 的 结果 集 。 

| 回 优点 : 可 以 合并 相同 样式 减少 代码 宛 余 。 

| 加 缺点 : 不 方便 个 性 管理 和 编辑 。 

| 示例】 下 面 的 示例 使 用 分 组 将 所 有 标题 元 素 统一 样式 。 

| hl. h2, h3, h4. h$. h$, h6 { 

| margin: 0: 让 清除 标题 的 默认 外 边 距 */ 

| margin-bottom: 10px: 片 使 用 下 边 距 拉 开标 题 距离 */ 

| 

| 


} 


2.5 属性 选择 器 


属性 选择 器 是 根据 标签 的 属性 来 匹配 元 素 ， 使 用 中 括号 进行 标识 。 
[属性 表达 式 ] 


CSS3 包括 7 种 属性 选择 器 形式 ， 结 合 示例 具体 说 明 如 下 。 
【示例 】 下 面 的 示例 设计 了 一 个 简单 的 图 片 灯箱 导航 ， 其 中 HIML 结构 代码 如 下 。 


<div class="pic_box"> 
<img SIc="images/bgl.jpg" /> 
<div class="nav"> 
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
<a href="#5" class="links item" title="zh-cn">5</a> 
<a href="#6" class="links item" title="website link" lang="zh">6</a> 
<a href="#7" class="links item" title="open the website" lang="cn">7</a> 
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
<a href="#9" class="links item" title="http://www.baidu.com">9</a> 
| <a href="#10" class="links item last" id="last">10</a> 
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</div> 


| 
| 
</div> | 
| 
使 用 CSS 适当 美化 ， 具 体 样式 代码 请 参考 本 节 示 例 源 代码 ， 初 始 预 览 效果 如 图 2.8 所 示 。 | 


图 2.8 设计 的 灯箱 广告 效果 图 


1. Efattr] | 
选择 具有 attr 属性 的 卫 元 素 。 例 如 : | 
-nav a[id] {background: blue: color:yellow:font-weightbold:} | 

| 


上 面 的 代码 表示 : 选择 divnav 下 所 有 带 有 id 属性 的 a 元素 ， 并 在 这 个 元 素 上 使 用 背景 色 为 蓝 色 ， 前 景 | 


色 为 黄色 ,字体 加 粗 的 样式 。 对 照 上 面 的 HTML 结构 代码 ， 不 难 发 现 ， 只 有 第 一 个 和 最 后 一 个 a 元 素 使 用 | 
了 id 属性 ， 所 以 选中 这 两 个 a 元 素 ， 效 果 如 图 2.9 所 示 。 | 
也 可 以 指定 多 属性 。 | 


.hav a[hrefl[title] {background: yellow; color:green:} 
上 面 的 代码 表示 的 是 选择 divnav 下 的 同时 具有 href 和 title 两 个 属性 的 a 元素 ,效果 如 图 2.10 所 示 。 


000000000 | 123@56s67s9@ 


图 2.9 属性 快速 匹配 图 2.10 多 属性 快速 匹配 


2. Elattr="value"] 
选择 具有 attr 属性 ， 且 属性 值 等 于 value 的 E 元 素 。 例如: 
.nav a[id="first"] {background: blue: color:yellow:font-weight:bold:} 


上 面 的 代码 表示 选中 divnav 中 的 a 元 素 ， 且 这 个 元 素 有 一 个 id="first" 属性 值 ， 则 预览 效果 如 图 2.11 
所 示 。 | 
E[att="value"] 属性 选择 器 也 可 以 多 个 属性 并 写 ， 进 一 步 缩小 选择 范围 ， 用 法 如 下 所 示 ， 则 预览 效果 如 | 
图 2.12 所 示 。 | 


.nav a[href="#1"][title] fbackground: yellow: color:green:} 
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| 

| > 

| 

| 

O000000000 1990600600 
| 图 2.11 属性 值 快速 匹配 图 2.12 多 属性 值 快速 匹配 

| 


| 3. Efattr ~="value"] 


选择 具有 attr 属性 ， 且 属性 值 为 一 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 value 的 王 元 素 。 包 含 只 有 一 
| 个 值 ， 且 该 值 等 于 value 的 情况 。 例 如 : 


-nav altitle ~ ="website"] fbackground:orange:color:green:} 

| 上 面 的 代码 表示 在 div.nav 下 的 a 元 素 的 title 属性 中 ， 只 要 其 属性 值 中 含有 "website" 这 个 词 就 会 被 选 
| 择 , 结果 a 元 素 中 “2”“6”“7”“8” 这 4 个 a 元 素 的 tite 中 都 含有 ， 所 以 被 选中 ， 如 图 2.13 所 示 。 

| 4. E[attr'="value"] 

| 选择 具有 attr 属性 ， 且 属性 值 为 以 value 开头 的 字符 串 的 卫 元 素 。 例 如: 


.nav af[title^="http://"]{fbackground:orange:colorgreen:} 
.nav af[title^="mailto:"]{fbackground:green:colororange:} 


| 
| 上 面 的 代码 表示 的 是 选择 了 以 title 属性 ， 并 且 以 "http:/" 和 "mailto:" 开头 的 属性 值 的 所 有 a 元素 ， 匹 
| 配 效果 如 图 2.14 所 示 。 

| 


[ooeeoeeoeooe | Loee06ooeeoe | 


图 2.13 ”属性 值 局 部 词 匹配 图 2.14 匹配 属性 值 开头 字符 串 的 元 素 


5. E[attr$="value"] 
| 选择 具有 attr 属性 ， 且 属性 值 为 以 value 结尾 的 字符 串 的 EE 元 素 。 例 如 : 

| .nav a[href$="png"]{fbackground:orange:color:green:} 

| 上 面 的 代码 表示 选择 div.nav 中 元 素 有 href 属性 ， 并 以 "png" 结尾 的 a 元 素 。 
| 6. Elattr*="value"] 

| 选择 具有 attr 属性 ， 且 属性 值 为 包含 value 的 字符 串 的 EE 元 素 。 例 如: 

| 

| 

| 


.nav altitle*="site"] fbackground:black:colorwhite:} 


上 面 的 代码 表示 选择 divnav 中 a 元素 的 title 属性 中 只 要 有 "site" 字符 串 就 可 以 。 上 面 样式 的 预览 效果 
| 如 图 2.15 所 示 。 
7. E[attr|="value"] 
| 选择 具有 attr 属性 ， 其 值 是 以 value 开头 ， 并 用 连接 符 (- ) 分 隔 的 字符 串 的 卫 元 素 ; 如 果 值 仅 为 value， 
| 也 将 被 选择 。 例 如 : 


| 
| -nav allang|="zh"] {background:gray:color:yellow:} 
| 
| 
| 


上 面 的 代码 会 选中 div.nav 中 lang 属性 等 于 加 或 以 zh- 开头 的 所 有 a 元 素 ， 如 图 2.16 所 示 。 


[eeeoeeooeeoe | 06606606060@ | 
| 图 2.15 ”匹配 属性 值 中 的 特定 子 串 图 2.16 ”匹配 属性 值 开 头 字符 串 的 元 素 
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2.6 伪 选 择 器 


伪 选 择 器 包括 伪 类 选择 器 和 伪 对 象 选 择 器 ， 伪 选择 器 能 够 根据 元 素 或 对 象 的 特征 、 
匹配 。 | 
伪 选 择 器 以 冒号 (: ) 作为 前 缀 标识 符 。 冒 号 前 可 以 添加 限定 选择 符 ， 限 定 伪 类 应 用 的 范围 ， 冒 号 后 为 | 
伪 类 和 伪 对 象 名 ， 冒 号 前 后 没有 空格 。 

CSS 伪 类 选择 器 有 以 下 两 种 用 法 方式 。 
| 
| 


回 单纯 式 

E:pseudo-class { property:value} 

其 中 下 为 元 素 ，pseudo-class 为 伪 类 名 称 ，property 是 CSS 的 属性 ，value 为 CSS 的 属性 值 。 例 如 : | 
alink {color:red:} 
回 混用 式 | 
E.class:pseudo-class {property:value} | 


其 中 .class 表示 类 选择 符 。 把 类 选择 符 与 伪 类 选择 符 组 成 一 个 混合 式 的 选择 器 ， 能 够 设计 更 复杂 的 样 | 
式 ， 以 精准 匹配 元 素 。 例 如 : | 


| 
| 
a.selected:hover {color: blue;} | 


CSS3 支持 的 伪 类 选择 器 具体 说 明 如 表 2.1 所 示 ，CSS3 支持 的 伪 对 象 选择 器 具体 说 明 如 表 2.2 所 示 。 
表 2.1 伪 类 选择 器 列表 


| 

选择 器 说 明 | 
E:link 设置 超 链接 a 在 未 被 访问 前 的 样式 | 
Evisited 设置 超 链接 a 在 其 链接 地 址 已 被 访问 过 时 的 样式 | 
Ehover 设置 元 泰 在 其 鼠标 晤 停 时 的 样式 | 
Eactive 设置 元 素 在 被 用 户 激活 ( 在 鼠标 点 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 | 
Efocus 设置 对 象 在 成 为 输入 焦点 时 的 样式 
E:lang(fr) 匹配 使 用 特殊 语言 的 EE 元素 | 
Enot(s) 匹配 不 含有 s 选择 符 的 元 素 E。CSS3 新 增 | 
Eroot 匹配 元 素 在 文档 的 根 元 素 。 在 HTML 中 。 根 元 素 永远 是 HIML。CSS3 新 增 | 
Efirst-child 匹配 父 元 素 的 第 一 个 子 元 素 E。CSS3 新 增 | 
Erlast-child 匹配 父 元 素 的 最 后 一 个 子 元素 E。CSS3 新 增 
E:only-child 匹配 父 元 素 仅 有 的 一 个 子 元 素 E。CSS3 新 增 | 
E:nth-child(n) 匹配 父 元 素 的 第 n 个 子 元 素 E， 假设 该 子 元 素 不 是 E， 则 选择 符 无 效 。CSS3 新 增 | 
E:nth-last-child(n) 匹配 父 元 素 的 倒数 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 EE， 则 选择 符 无 效 。CSS3 新 增 | 
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eic 各 mxuk 开 雪 信 入门 到 精通 ( 稚 课 靖 久 及) 


续 表 

选择 器 说 明 
E:first-of-type 匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:last-of-type 匹配 同类 型 中 的 最 后 一 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:only-of-type 匹配 同类 型 中 的 唯一 的 一 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:nth-of-type(n) 匹配 同类 型 中 的 第 na 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:nth-last-of-type(n) | 匹配 同类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:empty 匹配 没有 任何 子 元 素 ( 包括 text 节点 ) 的 元 素 E。CSS3 新 增 
Bd ei E。 注 意 ， 用 于 input 的 type 为 radio 与 checkbox 时 。CSS3 
E:enabled 匹配 用 户 界面 上 处 于 可 用 状态 的 元 素 E。CSS3 新 增 
E:disabled 匹配 用 户 界面 上 处 于 禁用 状态 的 元 素 E。CSS3 新 增 
E:target 匹配 相关 URL 指向 的 E 元 素 。CSS3 新 增 
@page :first 设置 在 打印 时 页 面容 器 第 一 页 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 
@page :left 设置 页 面容 器 位 于 装订 线 左边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 
@page :right 设置 页 面容 器 位 于 装订 线 右边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 

表 2.2 伪 对 象 选择 器 列表 
选择 器 说 上 明 
E:first-letter/E::first-letter | 设置 对 象 内 的 第 一 个 字符 的 样式 。 注 意 ， 仅 作用 于 块 对 象 。CSS3 完善 
| E:firstline/E::first-line 设置 对 象 内 的 第 一 行 的 样式 。 注 意 ， 仅 作用 于 块 对象 。CSS3 完善 

E:before/E::before 设置 在 对 象 前 发 生 的 内 容 。 与 content 属性 一 起 使 用 ， 且 必须 定义 content 属性 。CSS3 完善 
E:after/E::after 设置 在 对 象 后 发 生 的 内 容 。 与 content 属性 一 起 使 用 ， 且 必须 定义 content 属性 。CSS3 完善 
E::placeholder 设置 对 象 文字 占 位 符 的 样式 。CSS3 新 增 
E::selection 设置 对 象 被 选择 时 的 样式 。CSS3 新 增 


由 于 CSS3 伪 选 择 器 众多 ， 下 面 仅 针对 CSS3 中 新 增 的 伪 类 选择 器 进行 说 明 ， 其 他 选择 器 请 读者 参考 


| css3 参考 手册 详细 了 解 。 


| 2.6.1 ”结构 伪 类 


结构 伪 类 是 根据 文档 结构 的 相互 关系 来 匹配 特定 的 元 素 ， 从 而 减少 文档 元 素 的 class 属性 和 了 D 属 性 的 


| 无 序 设置 ， 使 得 文档 更 加 简洁 。 


结构 伪 类 形式 多 样 ， 但 用 法 固定 ， 以 使 设 计 各 种 特殊 样式 效果 ， 结 构 伪 类 主要 包括 下 面 几 种 ， 简 单 说 


| 明 如 下 。 


:fist-child: 第 一 个 子 元 素 。 
回 :lastchild: 最 后 一 个 子 元 素 。 
:nth-child0: 按 正 序 匹配 特定 子 元 素 。 
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| 
| 
| 
:nth-last-child0 : 按 倒序 匹配 特定 子 元 素 。 | 
:nth-oftype0: 在 同类 型 中 匹配 特定 子 元 素 。 | 
:nth-last-of-type(): 按 倒序 在 同类 型 中 匹配 特定 子 元 素 。 | 
:first-of-type: 第 一 个 同类 型 子 元 素 。 | 
:only-child: 唯一 子 元 素 。 | 
:only-of-type: 同类 型 的 唯一 子 元 素 。 | 

| 

| 


办 办 办 办 办 多 


:empty: 空 元 素 。 | 
【示例 1】 下 面 的 示例 设计 了 排行 榜 栏 目 列表 样式 ， 效 果 如 图 2.17 所 示 。 在 列表 框 中 为 每 个 列表 项 定义 | 
相同 的 背景 图 像 。 | 


< 
双 周 热门 推荐 

加 六 RT 里 人 i- 呈 

CT 

加 RMB 去 ， 入 内 和 

加 

国 同和 及 利 正 天生 之 生 


| 
| 
| 
| 
| 
加 人 | 
四“ 亲人 | 
| 
| 
| 
| 


IN, Sf 上 RE - 


图 2.17 设计 推荐 栏目 样式 


设计 列表 结构 ， 代 码 如 下 。 


<div id="wrap"> | 
<ul id="container"> | 
<li><a href="#"> 送 君 千里 终 须 一 别 </a></li> | 
<li><a hre 伍 "#"> 旅行 的 意义 </a></li> | 
<li><a href="#"> 南 师 虽 去 ， 精 神 永 存 </a></li> | 
<li><a href="#"> 榴莲 精米 粒 </a></li> | 
<li><a hre 全 "#"> 阿尔 及 利 亚 天 命 之 年 </a></li> | 
<li><a hre 伍 "#"> 白菜 鸡 肉 粉丝 包 </a></li> | 
<li><a href="#">《 展 望 塔 上 的 杀人 》</a></li> | 
<li><a hre 仁 "#"> 我 们 ， 只 会 在 路 上 相遇 </a></li> | 
</ul> | 
</div> | 
| 
| 

设计 的 列表 样式 请 参考 本 节 示例 源 代码 。 下 面 结合 本 示例 分 析 结构 伪 类 选择 器 的 用 法 。 
1. :first-child | 
【示例 2】 如 果 设 计 第 一 个 列表 项 前 的 图 标 为 1， 且 字体 加 粗 显 示 ， 则 使 用 :frst-child 匹配 。 | 
#wrap li:first-child { 
background-position:2px 10px: | 
font-weightbold: | 
} | 
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:last-of type: 最 后 一 个 同类 型 子 元 素 。 


a eic 各 和 zk 开 去 信和 站 到 精通 ( 稚 课 靖 全 服 ) 


b>] 


T 
| 
| 
| 
| 2. :last-child 

| 【示例 3】 如 果 单 独 给 最 后 一 个 列表 项 定义 样式 ， 就 可 以 使 用 :last-child 来 匹配 。 
| #wrap li:last-child {background-position:2px -277px:} 

| 显示 效果 如 图 2.18 所 示 。 

Note E ten | 

:nth-child0 可 以 选择 一 个 或 多 个 特定 的 子 元 素 。 它 有 如 下 多 种 用 法 。 
:nth-child(length);/* 参数 是 具体 数字 */ 

:nth-childto):/*# 参数 是 n， na 从 0 开始 计算 */ 
:nth-child(n*length); /*n 的 倍数 选择 ,n 从 0 开始 计算 */ 

:nth-child(ntlength); /* 选择 大 于 或 等 于 length 的 元 素 */ 

:nth-child(-ntlength); /* 选择 小 于 或 等 于 length 的 元 素 */ 
:nth-childtn*length+l):* 表示 隔 几 选 一 */ 


在 :nth-child0 中 ， 参 数 length 为 一 个 整数 ，n 表示 一 个 从 0 开始 的 自然 数 。 

:nth-child0 可 以 定义 值 ， 值 可 以 是 整数 ， 也 可 以 是 表达 式 ， 用 来 选择 特定 的 子 元 素 。 

| 【示例 4】 下面 6 个 样式 分 别 匹配 列表 中 第 2 ~ 7 个 列表 项 ， 并 分 别 定义 它们 的 背景 图 像 了 轴 坐 标 位 置 ， 
| 显示 效果 如 图 2.19 所 示 。 

| #wrap li:nth-child(2) { background-position: 2px -31px; } 

#wrap li:nth-child(3) { background-position: 2px -72px; } 

#wrap li:nth-child(4) { background-position: 2px -113px: } 

#wrap li:nth-child(5) { background-position: 2px -154px: } 

#wrap li:nth-child(6) { background-position: 2px -195px: } 

#wrap li:nth-child(7) { background-position: 2px -236px: } 


-Lee -ac as| € I CET 
双 周 热门 推荐 双 周 治 门 推荐 

国运 BT 旦 弘 拓 -出 加 六 8 里 人 和- 曾 

国志 行 的 和 义 国 旅行 约定 义 

四 商用 县 去 ， 本 让 和 加 击 雪 , 信和 和 


| 
| 
| 
| 
| 
| 1 
| kt 

| 后 处 及 和 下 天 命 之 年 

| 四 RENER 

| RMA 《本人 3 

| Meintei 器 ny 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


图 2.18 设计 最 后 一 个 列表 项 样式 图 2.19 设计 每 个 列表 项 样式 


注意 ,这 种 函数 参数 用 法 不 能 引用 负 值 ， 也 就 是 说 linth-child(C-3) 是 不 正确 的 使 用 方法 。 

回 :nth-child(n) 
| 在 :nth-child(n) 中 , n 是 一 个 简单 的 表达 式 , 它 取 值 是 从 0 开始 计算 的 ， 到 什么 时 候 结束 是 不 确定 的 ， 
| 需 结合 文档 结构 而 定 ， 如 果 在 实际 应 用 中 直接 这 样 使 用 的 话 ， 将 会 选中 所 有 子 元 素 。 
| 【示例 51 在 上 面 的 示例 中 ， 如 果 在 二 中 使 用 :nth-child(n), 那么 将 选中 所 有 的 匡 元 素 。 
| #wrap li:nth-child(n) {text-decoration:underline:} 
| 
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则 这 个 样式 类 似 于 : 
#wrap li {text-decoration:underline:} 


其 实 ，nth-child@) 是 这 样 计算 的 : 

n=0: 表示 没有 选择 元 素 。 

n=1: 表示 选择 第 一 个 二 元 素 。 | 

n=2: 表示 选择 第 二 个 元素。 | 

依 此 类 推 ， 这 样 下 来 就 选中 了 所 有 的 元素 。 | 
| 
| 


#wrap li:nth-child(2n) {font-weight:bold:} 


等 价 于 : 
#wrap li:nth-child(even) {font-weight:bold;} 


预览 效果 如 图 2.20 所 示 。 


MB -BG npcato. - Bo| S| 
双 周 热门 推荐 

四 送 如 二 里 终 须 -- 别 

加 放行 的 意义 

国 南 师 虽 去 ， 精 神 永存 


术科 米 梯 

国 阿尔 及 利 下 天 命 之 年 
回 SNE 

改 展 望 堪 上 的 杀人 入 
我 们 ， 只 会 在 路 上 相遇 


图 2.20 设计 偶数 行列 表 项 样式 


其 实现 过 程 如 下 。 

当 n=0， 则 2n=0， 表 示 没 有 选中 任何 元 素 。 

当 m=1， 则 2n=2， 表 示 选 择 了 第 二 个 二 元素。 

当 n=2， 则 mn = 4， 表 示 选 择 了 第 四 个 元素。 

如 果 是 29， 这 样 与 使 用 even 命名 class 定义 样式 所 起 到 的 效果 是 一 样 的 。 

回 :nth-child(2n-1) | 

【示例 7】:nth-child(2n-1) 是 在 :nth-child(2n) 基础 上 演变 来 的 ， 既 然 :nth-child(2n) 表示 选择 偶数 ， 那 么 
在 它 的 基础 上 减 去 1 就 变 成 奇数 选择 。 | 
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#wrap li:nth-child(2n-1) {font-weight:bold:} 


等 价 于 : 
#wrap li:nth-child(odd) {font-weight:bold:} 


其 实现 过 程 如 下 。 

当 n=0， 则 2n-1=-1， 表 示 没 有 选中 任何 元 素 。 

当 n=1， 则 2n-1=1， 表 示 选 择 第 一 个 上 元素 。 

当 n=2， 则 2n-1=3， 表 示 选 择 第 三 个 元 素 。 

其 实 这 种 奇数 效果 ， 还 可 以 使 用 :nth-child(2n+1) 和 :nth-child(odd) 来 实现 。 
回 :nth-child(n+5) 

【示例 8】:nth-child(n+5) 是 从 第 五 个 子 元 素 开始 选择 。 

li:nth-child(n+5) {font-weight:bold:} 


其 实现 过 程 如 下 。 
当 n=0， 则 n+5=5， 表 示 选 中 第 五 个 元 素 。 
当 n=1， 则 n+5=6， 表 示 选 择 第 六 个 二 元 素 。 


可 以 使 用 这 种 方法 选择 需要 开始 选择 的 元 素 位 置 ， 也 就 是 说 换 了 数字 ， 起 始 位 置 就 变 了 。 


回 :nth-child(-n+5) 
【示例 9】:nth-child(-n+5) 刚好 和 :nth-child(n+5) 相反 ， 是 选择 第 五 个 前 面 的 子 元 素 。 
li:nth-child(-n+5) {font-weight:bold:} 


其 实现 过 程 如 下 。 

当 n=0， 则 -n+5=5， 表 示 选 择 了 第 五 个 上 元 素 。 
当 n=1， 则 -n+5=4， 表 示 选 择 了 第 四 个 元素。 
当 n=2， 则 -n+5=3 ， 表 示 选 择 了 第 三 个 1 元 素 。 
当 n=3， 则 -n+5=2， 表 示 选 择 了 第 二 个 元素。 
当 n=4， 则 -n+5=1， 表 示 选 择 了 第 一 个 元素。 
当 n=5， 则 -n+5=0， 表 示 没 有 选择 任何 元 素 。 

回 :nth-child(Sn+l) 

:nth-child(5n+1) 是 实现 隔 几 选 一 的 效果 。 

【示例 10】〗】 如 果 是 隔 三 选 一 ， 则 定义 的 样式 如 下 。 
li:nth-child(3n+1) {font-weight:bold:} 


其 实现 过 程 如 下 。 

当 n=0， 则 3n+l=1， 表 示 选 择 了 第 一 个 再 元 素 。 
当 n=1， 则 3n+1=4， 表 示 选 择 了 第 四 个 二 元 素 。 
当 n=2， 则 3n+t1=7， 表 示 选 择 了 第 七 个 元 素 。 
设计 效果 如 图 2.21 所 示 。 
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MO- Snocto. - 3c 中 
双 周 热门 推荐 

国 送 妊 千里 终 须 - 别 

国 旅行 的 意义 


阿尔 及 利 下 天 命 之 年 


| 
| 
| 
四 白菜 允 内 检 丝 包 | 
加 《情思 二 上 :的 杀人》 | 
加 我 们 , 只 会 在 路 上 性 号 | 
| 
| 
| 


图 2.21 设计 隔 三 选 一 行列 表 项 样式 


4. :nth- last-child() | 
【示例 11】:nth-last-child0 与 :nth-child0 相似 ， 但 作用 与 :nth-child 不 一 样 ，:nth-last-child0 只 是 从 最 后 
一 个 元 素 开 始 计 算 ， 来 选择 特定 元 素 。 | 
li:nth-last-child(4) {font-weight:bold:} 


上 面 代码 表示 选择 倒数 第 四 个 列表 项 。 

其 中 :nth-last-child(1) 和 :last-child 所 起 的 作用 是 一 样 的 ， 都 表示 选择 最 后 一 个 元 素 。 

另外 ，:nth-last-child0) 与 :nth-child0 用 法 相同 ， 可 以 使 用 表达 式 来 选择 特定 元 素 ， 下 而 来 大 几 个 特 珠 的 | | 
表达 式 所 起 的 作用 。 | 

:nth-last-child(2n) 表示 从 元 素 后 面 计算 ， 选 择 的 是 偶数 个 数 ， 反 过 来 说 就 是 选择 元 素 的 奇数 ， 与 前 面 的 | 
:nth-child(2n+1)、:nth-child(2n-1)、:nth-child(odd) 所 起 的 作用 是 一 样 的 。 例 如 : 

li:nth-last-child(2n) { font-weight:bold:} 

li:nth-last-child(even) {font-weight:bold:} 


等 价 于 : 

li:nth-child(2n+1) {font-weight:bold:} 
li:nth-child(2n-1) {font-weight:bold:} 
li:nth-child(odd) {font-weight:bold:} 


| 
| 
| 
| 
| 
:nth-last-child(2n-1) 刚好 与 上 面相 反 ， 从 后 面 计算 选择 的 是 奇数 ， 而 从 前 面 计算 选 择 的 就 是 偶数 了 ， | 
| 
| 
| 
| 
| 
| 
| 
| 


例如 : 


li:nth-last-child(2n+1) {font-weight:bold:} 
li:nth-last-child(2n-1) {font-weight:bold:} 
li:nth-last-child(o0dd) {font-weight:bold:} 


等 价 于 : 


li:nth-child(2n) {font-weight:bold:} 
li:nth-child(even) {font-weight:bold:} 


总 之 ，:nth-last-childO 和 nth-child0 的 使 用 方法 是 一 样 的 ， 只 不 过 它们 的 区 别 是 : :nth-child0 是 从 元 素 | 
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的 第 一 个 开始 计算 ， 而 :nth-last-child0 是 从 元 素 的 最 后 一 个 开始 计算 ， 它 们 的 计算 方法 都 是 一 样 的 。 


5. :nth-of-typeO 
:nth-of-type0 类 似 :nth-child0， 不 同 的 是 它 只 计算 选择 器 中 指定 的 那个 元 素 。 它 适合 用 于 过 滤 中 包含 了 
多 种 不 同类 型 的 子 元 素 。 


【示例 12】 在 diviwrap 中 包含 有 P、1i、img 等 元 素 ， 但 现在 只 需要 选择 p 元 素 ， 并 让 它 每 隔 一 个 元 
| 素 就 有 不 同 的 样式 ， 可 以 简单 地 写成 : 
| div#wrap p:nth-of-type(even) { font-weight:bold:} 


其 实 ,这 种 用 法 与 :nth-child0 是 一 样 的 ， 也 可 以 使 用 :nth-child0 来 实现 ， 唯 一 不 同 的 是 :nth-of-typeO 
指定 了 元 素 的 类 型 。 
6. :nth-last-of-typeO 
| :nth-last-of-type( 与 :nth-last-child0 用 法 相同 ， 但 它 指 定 了 子 元 素 的 类 型 ， 除 此 之 外 ,语法 形式 和 用 法 
| 基本 相同 。 
7. :first-of-type 和 :last-of-type 
| :first-of-type 和 :last-of-type 类 似 于 :first-child 和 :last-child， 不同 之 处 是 它们 指定 了 元 素 的 类 型 。 
| 8. :only-child 和 :only-of-type 
| :only-child 表示 一 个 元 素 是 它 的 父 元 素 的 唯一 一 个 子 元 素 。 
| 
| 
| 


【示例 13】 在 文档 中 设计 HTML 结构 ,代码 如 下 。 
<div class="post"> 
<p> 第 一 段 文本 内 容 </p> 
<p> 第 二 段 文本 内 容 </p> 
</div> 
<div class="post"> 
<p> 第 三 段 文 本 内 容 </p> 
</div> 


如 果 需 要 在 divpost 只 有 一 个 p 元 素 的 时 候 ， 改 变 这 个 p 元 素 的 样式 ,可 以 使 用 :only-child 来 实现 。 


.post p:only-child {background: red:} 
此 时 divpost 只 有 一 个 子 元 素 p 时 ， 它 的 背景 色 将 会 显示 为 红色 。 


:only-of-type 表示 一 个 元 素 包含 很 多 个 子 元 素 ， 而 其 中 只 有 一 个 子 元 素 是 唯一 的 ， 那 么 使 用 这 种 选择 方 
| 法 就 可 以 选中 这 个 唯一 的 子 元 素 。 例 如 : 


| 
| 
| 
| 
| 
| 
| .postp {font-weight:bold:} 
| 
| 
| 
| 
| 
| 


| <div class="post"> 

| <div> 子 块 一 </div> 
| <p> 文 本 段 </p> 

| <div> 子 块 二 </div> 
| </div> 

| 

| 如 果 只 想 选择 上 面 结构 块 中 的 p 元 素 ， 可 以 这 样 写 : 
| .post p:only-of-type {background-color:red:} 
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:empty 是 用 来 选择 没有 任何 内 容 的 元 素 ， 这 里 没有 内 容 指 的 是 一 点 内 容 都 没有 ,包括 空格 。 
【示例 14】 下 面 的 示例 有 3 个 段落 ， 其 中 一 个 段落 什么 都 没有 ， 完 全 是 空 的 。 


<div class="post"> | 
<p> 第 一 段 文本 内 容 <p> 


| 
| 
| 
| 
9. :empty | 
| 
| 
| 
| 
| 


<p> 第 二 段 文 本 内 容 </p> | 
</div> | 
<div class="post"> | 
<p> </p> | 
</div> | 
| 

| 

| 

| 


如 果 想 设计 这 个 p 元 素 不 显示 ， 可 以 这 样 来 写 : 
.post p:empty {display: none:} 


2.6.2 否定 伪 类 | 


:not0 表示 否定 选择 器 ， 即 过 滤 掉 not0 匹配 的 特定 元 素 。 | 
【示例 】 下 面 的 示例 为 页 面 中 所 有 段落 文本 设置 字体 大 小 为 24 像素 ， 然 后 使 用 :notCauthon) 排出 第 一 段 | 
文本 ， 设 置 其 他 段落 文本 的 字体 大 小 为 14 像素 ， 显 示 效 果 如 图 2.22 所 示 。 | 


| 
<style type="text/css"> | 
p { font-size: 24px: } | 
pinot(.author) { font-size: 14px: } | 
</style> 

<h2> 虞 美人 春花 秋月 何 时 了 </h2> 

<p class="author"> 李煜 </p> 
<p> 春花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 </p> 
<p> 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 愁 ? 恰似 一 江 春水 向 东 流 。 </p> 


局 EIT FT 本 避 光 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

虞 美人 .春花 秋月 何 时 了 | 
| 

李煜 | 
春花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 塔 回首 月 明 中 | 
肉 栏 玉 戎 应 犹 在 ， 只 是 朱 额 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春 水 向 东 流 。 | 
| 

| 

| 

| 

| 

| 

| 

| 


图 2.22 否定 伪 类 的 应 用 


2.6.3 ”状态 伪 类 


CSS3 包含 3 个 UI 状态 伪 类 选择 器 ， 简 单 说 明 如 下 。 | 
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:enabled: 匹配 指定 范围 内 所 有 可 用 民 元素。 


回 :disabled: 匹配 指定 范围 内 所 有 不 可 用 UI 元 素 。 
回 :checked: 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 


【示例 】 下 面 的 示例 设计 了 一 个 简单 的 登录 表单 ， 效 果 如 图 2.23 所 示 。 在 实际 应 用 中 
| 毕 ， 不 妨 通过 脚本 把 文本 框 设置 为 不 可 用 ( disabled="disabled" ) 状态 ， 


h， 当 用 户 登录 完 


这 时 可 以 通过 :disabled 选择 器 让 


| 文本 框 显 示 为 灰色 ， 以 告诉 用 户 该 文本 框 不 可 用 了 ， 这 样 就 不 用 设计 “不 可 用 ”样式 类 ， 并 把 该 类 添加 到 


| HIML 结构 中 。 


回回 “> 
ss 


A TTT CT 


图 2.23 设计 登录 表单 样式 
第 1 步 ， 新 建 一 个 HIML 文档 ， 在 文档 中 构建 一 个 简单 的 登录 表单 结构 ， 代 码 如 下 。 


<form action="#"> 
<label for="username"> 用 户 名 </label> 


<input type="text" name="usemame1" disabled="disabled" value=" 不 可 用 " /> 
<label for="password"> 密码 </label> 
<input type="password" name="password" id="password" /> 
<input type="password" name="password1" disabled="disabled" value=" 不 可 用 " /> 
<input type="submit" value=" 提交 "/> 

</form> 


在 这 个 表单 结构 中 ,使 用 HTML 的 disabled 属性 分 别 定义 两 个 不 可 用 的 文本 框 对 象 。 
第 2 步 ， 内 建 一 个 内 部 样式 表 ， 使 用 属性 选择 器 定义 文本 框 和 密码 域 的 基本 样式 。 
input[type="text"], input[type="password"] { 

border: 1px solid #0f0: 

width:160px:; 

height:22px: 

padding-left:20px: 

margin:6px 0: 

line-height:20px:} 


第 3 步 ， 利 用 属性 选择 器 ， 分 别 为 文本 框 和 密码 域 定义 内 嵌 标 识 图 标 。 


input[type="text"] { background:url(images/name.gif) no-repeat 2px 2px: } 
input[type="password"] { background:url(images/password.gif) no-repeat 2px 2px: } 


第 4 步 ， 使 用 状态 伪 类 选择 器 ， 定 义 不 可 用 表单 对 象 显示 为 灰色 ， 以 提示 用 户 该 表单 对 象 不 可 用 。 


input[type="text"]:disabled { 
background:#ddd url(images/namel .gif) no-repeat 2px 2px: 
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border:1px solid #bbb:} 

input[type="password"]:disabled { 
background:#ddd url(images/password]1 .gif) no-repeat 2px 2px; 
border:1px solid #bbb;} 


2.6.4 目标 伪 类 


目标 伪 类 选择 器 类 型 形式 如 E:target， 它 表示 选择 匹配 卫 的 所 有 元 素 ， 且 匹配 元 素 被 相关 URL 指向 。 
该 选择 器 是 动态 选择 器 ， 只 有 当 存 在 URL 指向 该 匹配 元 素 时 ， 样 式 效果 才 有 效 。 

【示例 】 下 面 的 示例 设计 了 当 单 击 页 面 中 的 锚 点 链接 ， 跳 转 到 指定 标题 位 置 时 ， 该 标题 会 自动 高 亮 显 示 ， 
以 提醒 用 户 ， 当 前 跳 转 的 位 置 ， 效 果 如 图 2.24 所 示 。 


<style type="text/css"> 

锋 设 计 导航 条 固定 在 窗口 右上 角 位 置 显示 */ 
hl{ position:fxed: right:12px; top:24px:} 

店 让 错 点 链接 堆 秋 显示 */ 

hl af display:block:} 

启 设 计 锚 点 链接 的 目标 高 亮 显示 */ 

h2:target { background:hsla(93.96%,62%,1.00):; } 
</style> 

<h1><a hre 人 "各 1"> 图 片 1</a> <a hre 全 "和 2'> 图 片 2<a> <ahre 全 元 3> 图 片 3<a> <ahre 全 元 4> 图 片 4<a> <hl> 
<h2 id="pl"> 图 片 1</h2> 

<p><img SIc="images/1.jpg" /></p> 

<h2 id="p2"> 图 片 2</h2> 

<p><img SITc="images/2.jpg" /></p> 

<h2 id="p3"> 图 片 3</h2> 

<p><img SIc="images/3.jpg" /></p> 

<h2 id="p4"> 图 片 4</h2> 

<p><img src="images/4.jpg" /></p> 
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图 2.24 目标 伪 类 样式 应 用 效果 | 
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2.7 CSS 将 性 
| 视频 讲解 将 + 


CSS 样式 具有 两 个 特性 : 继承 性 和 层 释 性， 下 面 分 别 进行 说 明 。 


| 
2.7.1 CSS 继承 性 

| 

”Css 继承 性 是 指 后 代 元 素 可 以 继承 祖先 元 素 的 样式 。 继 承 样式 主要 包括 字体 、 文 本 等 基本 属性 ， 如 字 
| 体 、 字 号 、 颜 色 、 行 距 等 ， 对 于 边框 、 边 界 、 补 白 、 背 景 、 定 位 、 布 局 、 尺 寸 等 类 型 属性 是 不 允许 继承 的 。 
| 


”党 提示 : 灵活 应 用 CSS 继承 性 ， 可 以 优化 CSS 代码 ， 但 是 继承 的 样式 的 优先 级 是 最 低 的 。 


| 【示例 】 下 面 的 示例 在 body 元 素 中 定义 整个 页 面 的 字体 大 小 、 字 体 颜色 等 基本 页 面 属性 ， 这 样 包含 在 
body 元 素 内 的 其 他 元 素 都 将 继承 该 基本 属性 ， 以 实现 页 面 显示 效果 的 统一 。 
新 建 网 页 ， 保 存 为 test.html， 在 <body> 标签 内 输入 如 下 代码 ,设计 一 个 多 级 说 套 结构 。 


<div id="wrap"> 
<div id="header"> 
<div id="menu"> 
<U> 

<li><span> 首页 </span></li> 

<li> 菜单 项 </li> 
| </u> 
| </div> 
| </div> 
| <div id="main"> 
| <p> 主体 内 容 </p> 
| </div> 
| </div> 
| 
| 
| 
| 
| 


在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定义 内 部 样式 表 ， 然 后 为 body 元 素 定 义 字 体 大 小 
为 12 像素 ,通过 继承 性 ， 则 包含 在 body 元 素 的 所 有 其 他 元 素 都 将 继承 该 属性 ， 并 显示 包含 的 字体 大 小 为 
12 像素 。 在 浏览 器 中 预览 ， 显 示 效 果 如 图 2.25 所 示 。 


body {font-size:12px:} 


| 
四 
| 
| 
3 
| Dewan- sol | 
| 
| 
| 
| 
| 


| 图 2.25 “CSS 继承 性 演示 效果 
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2.7.2 ”CSS 层 又 性 


CSS 层 倒 性 是 指 CSS 能 够 对 同一 个 对 象 应 用 多 个 样式 的 能 力 。 
【示例 1】 新 建 网 页 ， 保存 为 testhtml， 在 <body> 标签 内 输入 如 下 代码 。 


<div id="wrap"> 看 看 我 的 样式 效果 </div> 


在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定义 一 个 内 部 样式 表 ， 分别 添加 以 下 两 个 


样式 。 


div {font-size:12px:} 
div {font-size:14px:;} 


两 个 样式 中 都 声明 了 相同 的 属性 ， 并 应 用 于 同一 个 元 素 上 。 在 浏览 器 中 测试 ， 则 会 发 现 最 后 字体 显示 | 


为 14 像素 ， 也 就 是 说 14 像素 字体 大 小 获 盖 了 12 像素 字体 大 小 ， 
当 多 个 样式 作用 于 同一 个 对 象 ， 则 根据 选择 器 的 优先 级 ， 确 定 对 象 最 终 应 用 的 样式 。 


标签 选择 器 : 权重 值 为 1。 
伪 元 素 或 伪 对 象 选 择 器 : 权重 值 为 1。 
类 选择 器 : 权重 值 为 10。 

属性 选择 器 : 权重 值 为 10。 
ID 选择 器 : 权重 值 为 100。 


罗 罗 办 济 办 办 办 凶 


其 他 选择 器 : 权重 值 为 0， 如 通 配 选 择 器 等 。 
后 ， 以 上 面 权 值 数 为 起 点 来 计算 每 个 样式 中 选择 器 的 总 权 值 数 。 计 算 规 则 如 下 。 
统计 选择 器 中 D 选择 器 的 个 数 ， 然 后 乘 以 100。 
统计 选择 器 中 类 选择 器 的 个 数 ， 然 后 乘 以 10。 
统计 选择 器 中 标签 选择 器 的 个 数 ， 然 后 乘 以 1。 


这 就 是 样式 层 番 。 


以 此 类 推 .最 后 把 所 有 权重 值 数 相 加 ， 即 可 得 到 当前 选择 器 的 总 权重 值 ， 最 后 根据 权重 值 来 决定 哪个 | 


样式 的 优先 级 大 。 


【示例 2】 新建 网 页 ， 保存 为 test.html， 在 <body> 标签 内 输入 如 下 代码 。 
<div id="box" class="red">CSS 选择 器 的 优先 级 </div> 


在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定 义 一 个 内 部 样式 表 ， 添 加 如 下 样式 。 


body div#box { border:solid 2px red:} 
#box {border:dashed 2px blue:} 
div.red {border:double 3px red:} 


对 于 上 面 的 样式 表 ， 可 以 这 样 计算 它们 的 权重 值 : 


body div#box 的 权重 值 =1+1+100= 102。 


#box 的 权重 值 = 100。 
dired 的 权重 值 =1+10=11。 


因此 ， 最 后 选择 器 的 优先 级 为 body div#box 大 于 #0x，#box 大 于 dired。 所 以 最 终 看 到 的 显示 效果 为 


2 像素 宽 的 红色 实 线 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 2.26 所 示 。 
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Eee 7 pe a ee ( 微 课 精 编 版 ) 


DO Sooton -solBcsse > 
Css 选择 器 的 优先 级 


图 2.26 CSS 优先 级 的 样式 演示 效果 


党 提示 : 与 样式 表 中 样式 相 比 ， 行 内 样式 优先 级 最 高 。 相 同 权重 值 时 ， 样 式 最 近 的 优先 级 最 高 。 使 
用 !important 命令 定义 的 样式 优先 级 绝对 高 。!important 命令 必须 位 于 属性 值 和 分 号 之 间 ， 如 
#header{color:Redlimportant;} ， 和 否则 无 效 。 


2.8 在 线 练习 
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第 章 


设计 移动 页 面 结构 


( 侣 1 视频 讲解 : 36 分 钟 ) 


创建 清晰 、 一 致 的 结构 不 仅 可 以 为 页 面 建 立 良好 的 语义 化 基础 ， 也 可 以 大 大 降低 
在 文档 中 应 用 CSS 样式 的 难度 。 本 章 介绍 构建 HIMLS 移动 应 用 文档 结构 所 需 的 HIML 
元 素 ， 以 及 这 些 元 素 的 使 用 方法 。 


【学 习 重 点 】 

P| 创建 页 面 标题 。 

| 普通 页 面 构成 。 

Pl 定义 页 刷 、 和 导航 和 页 脚 。 
| 定义 网 页 主要 区 域 。 

I 定义 文章 块 和 区 块 。 


HI7His 名 动 it 开 家 以 入 门 到 装 通 ( 航 香 兰 久 版) 


3.1 头 部 信息 


在 HIML 交 档 的 头 部 区 域 ， 存储 着 各 种 网 页 基本 信息 ( 也 称 元 信息 )， 这 些 信息 主要 被 浏览 器 所 采用 ， 
| 不 会 显示 在 网 页 中 。 另 外 ,搜索 引擎 也 会 检索 这 些 信息 ， 因 此 重视 并 设置 这 些 头 部 信息 非常 重要 。 


团 


3.1.1 定义 网 页 标题 


使 用 title 元 素 可 定义 网 页 标题 。 例 如 : 
<html> 

<head> 

<title>HTMLS 标签 说 明 </title> 

</head> 

<body> 

HTMLS5 标签 列表 

</body> 

</html> 


浏览 器 会 把 它 放 在 窗口 的 标题 栏 或 状态 栏 中 显示 ， 如 图 3.1 所 示 。 当 把 文档 加 入 用 户 的 链接 列表 、 收 藏 
| 颈 书签 列 表 时 ， 标 题 将 作为 该 文档 链接 的 默认 名 称 


C8 eectoses - So 


HTML5 标 签 列表 


图 3.1 显示 网 页 标题 


title 元 素 必须 位 于 head 部 分 。 页 面 标题 会 被 Google、 百 度 等 搜索 引擎 采用 ， 从 而 能 够 大 致 了 解 页 面 内 容 ， 
| 并 页 面 标题 作为 搜索 结果 中 的 链接 显示 ， 如 图 3.2 所 示 。 它 也 是 判断 搜索 结果 中 页 面相 关 度 的 重要 因素 。 


ba) le/ reclinees “| oS sdemss | «| 

国 
Ts 128mo 时 HTML/CSS JavaScript Server Side 
上 L、 XHTML 以 瑟 HTML DOM 的 白 标 准 。 HTML 的 上 一 个 新 本 证 生 干 199 


Www w3achool. com 


HTML5 教 得 | 某 包 才 各 ES HTML 5 简介 
HTML5 阐 刘 HTM1L5 喇 HTM 节 新 的 挫 订 上 本 .201 HTMILS 必 程 
时 (N3C) 庆 记 标 制定 。HTML5 多 该 计 目的 为 i 
8 。 多 械 诛 。HTML5 简单 易学 。 什 么 星 
-下 


| 
at 


> HIMLS 和 


图 3.2 网 页 标题 在 搜索 引擎 中 的 作用 
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总 之 ,让 每 个 页 面 的 tile 是 唯一 的 ， 从 而 提升 搜索 引擎 结果 排名 ， 并 让 访问 者 获得 更 好 的 体验 。 
【补充 ] | 
title 元 素 是 必需 的 ，title 中 不 能 包含 任何 格式 、HTML、 图 像 或 指向 其 他 页 面 的 链接 。 一 般 网 页 编辑 器 | 

会 预先 为 页 面 标题 填 上 默认 文字 ， 要 确保 用 自己 的 标题 蔡 换 它们 。 了 如 | 
A ,OA A Ne Sp 

量 是 网 站 追求 的 指标 之 一 ， 这 样 做 会 对 网 站 造成 很 大 的 损失 。 不 同 搜索 引擎 确定 网 页 排名 和 内 容 索引 规则 ， 

的 算法 是 不 一 样 的 。 不 过 ，title 通常 都 扮演 着 重要 的 角色 。 搜 索引 擎 会 将 title 作为 判断 页 面 主要 内 容 的 指 | 

标 ， 并 将 页 面 内 容 按照 与 之 相关 的 文字 进行 索引 。 

有 效 的 title 应 包含 几 个 与 页 面 内 容 密 切 相关 的 关键 字 。 作 为 一 种 最 佳 实践 ， 选择 能 简要 概括 文档 内 容 

的 文字 作为 title 文字 。 这 些 文字 既 要 对 屏幕 阅读 器 用 户 友好 ， 又 要 有 利于 搜索 引擎 排名 。 

将 网 站 名 称 放 入 fie， 但 将 页 面 特有 的 关键 字 放 在 网 站 名 称 的 前 面 会 更 好 。 建 议 将 tite 的 核心 内 容 放 

在 前 60 个 字符 中 ， 因 为 搜索 引擎 通常 将 超过 此 数目 ( 作为 基准 ) 的 字符 截断 。 不 同业 在 村 中 | 

的 字符 数 上 限 不 尽 相同 。 浏 览 器 标签 页 会 将 标题 截 得 更 短 ， 因 为 它 占 的 空间 较 少 。 


3.1.2 ”定义 网 页 元 信息 


使 用 meta 元 素 可 以 定义 网 页 的 元 信息 ,， 例 如， 定义 针对 搜索 引擎 的 描述 和 关键 词 ， 一 般 网 站 都 必须 设 | 
置 这 两 条 元 信息 ， 以 方便 搜索 引擎 检索 。 

回 定义 网 页 的 描述 信息 。 

<meta name="description" content=" 标准 网 页 设计 专业 技术 资讯 " /> 

回 定义 页 面 的 关键 词 。 

<meta name="keywords" content="HTML.DHTML.CSS. XML. XHTML, JavaScript" /> 


<meta> 标签 位 于 文档 的 头 部 ，<head> 标签 内 ， 不 包含 任何 内 容 。 使 用 meta 元 素 的 属性 可 以 定义 与 文 | 
档 相 关联 的 名 称 / 值 对 。<meta> 标签 可 用 属性 说 明 ， 如 表 3.1 所 示 。 


表 3.1 <meta> 标签 属性 列表 


属性 说 有明 
content 必需 的 ， 定 义 与 http-equiv 或 name 属性 相关 联 的 元 信息 
http-equiv 把 content 属性 关联 到 HTTP 头 部 。 取 值 包括 content-type 、refresh 、expires 、set-cookie 等 
scheme 定义 用 于 翻译 content 属性 值 的 格式 
charset 定义 文档 的 字符 编码 


【示例 】 下 面 列举 常用 元 信息 的 设置 代码 ， 更 多 元 信息 的 设置 读者 可 以 参考 HTML 参考 手册 。 
使 用 http-equiv 等 于 content-type， 可 以 设置 网 页 的 编码 信息 。 

加 设置 UTF-8 编码 。 

<meta http-equiv="content-type" content="text/html: charset=UTF-8" /> 


| 
| 
| 
| 
| 
| 
| 
| 
| 
name 把 content 属性 关联 到 一 个 名 称 。 取 值 包括 author、description 、keywords 、generator 、Ievised 等 | 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
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次 提示 : HTML5 简化 了 字符 编码 设置 方式 : <meta charset="utf-8">， 其 作用 是 相同 的 。 


回 设置 简体 中 文 gb2312 编码 。 
<meta http-equiv="content-type" content="texthtml: charset=gb2312" /> 


独立 于 任何 语言 ， 因 此 都 可 以 使 用 。 
使 用 content-language 属性 值 定义 页 面 语言 的 代码 。 如 下 所 示 为 设置 中 文 版 本 语言 。 
<meta http-equiv="content-language" content="zh-CN" /> 
使 用 refresh 属性 值 可 以 设置 页 面 刷新 时 间或 跳 转 页 面 ， 如 5 秒 钟 之 后 刷新 页 面 。 
<meta http-equiv="refresh" content="5" /> 
5 秒 钟 之 后 跳 转 到 百度 首页 。 
<meta http-equiv="refresh" content="5; url= https://www.baidu.com/" /> 
使 用 expires 属性 值 设置 网 页 缓存 时 间 。 
<meta http-equiv="expires" content="Sunday 20 October 2019 01:00 GMT" /> 
也 可 以 使 用 如 下 方式 设置 页 面 不 缓存 。 


<meta http-equiv="pragma" content="no-cache" /> 


类 似 设置 还 有 : 

<meta name="author" content="https://www.baidu.com/" /> <!-- 设置 网 页 作者 --> 

<meta name="copyright" content=" https://www.baidu.com/" /> <!-- 设置 网 页 版 权 --> 
<meta name="date" content="2019-01-12T20:50:30+00:00" /> <!-- 设置 创建 时 间 --> 

<meta name="robots" content="none" /> <!-- 设置 禁止 搜索 引擎 检索 -> 


3.1.3 ”定义 文档 视 口 


在 移动 Web 开发 中 ， 经 常会 遇 到 viewport ( 视 口 ) 问题 ， 就 是 浏览 器 显示 页 面 内 容 的 
移动 设备 的 浏览 器 默认 都 设置 一 个 <meta name="viewport"> 标签 ， 定 义 一 个 虚拟 的 布局 视 
期 的 页 面 在 手机 上 显示 的 问题 。 


屏幕 区 域 。 一 般 
口 ， 用 于 解决 早 


iOS、Android 基本 都 将 这 个 视 口 分 辩 率 设置 为 980px， 所 以 桌面 网 页 基本 能 够 在 手机 上 呈现 ， 只 


| name="viewport"> 标签 设置 视图 大 小 。 


<meta name="viewport"> 标签 的 设置 代码 如 下 。 


| 不 过 看 上 去 很 小 ,用 户 可 以 通过 手动 缩放 网 页 进行 阅读 。 这 种 方式 用 户 体验 很 差 ， 建 议 使 用 <meta 


<meta id="viewport" name="viewport" content="width=device-width: initial-scale=1.0: maximum-scale=1: 


user-scalable=no:"> 
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各 属性 说 明 如 表 3.2 所 示 。 


表 3.2 <meta name="viewport"> 标签 的 设置 说 明 


属性 取 值 说 有 明 
width 正 整 数 或 device-width 定义 视 口 的 宽度 ， 单 位 为 像素 
height 正 整数 或 device-height 定义 视 口 的 高 度 ， 单 位 为 像素 ， 一 般 不 用 
initial-scale [0.0 一 10.0] 定义 初始 缩放 值 
minimum-scale [0.0 一 10.0] 定义 缩小 最 小 比例 ， 它 必须 小 于 或 等 于 maximum-scale 设置 
maximum-scale [0.0—10.0] 定义 放大 最 大 比例 ， 它 必须 大 于 或 等 于 minimum-scale 设置 
user-scalable yes/no 定义 是 否 允 许 用 户 手动 缩放 页 面 ， 默 认 值 yes 


【示例 】 下 面 的 示例 是 在 页 面 中 输入 一 个 标题 和 两 段 文本 ， 如 果 没 有 设置 文档 视 口 ， 则 在 移动 设备 中 所 | 


呈现 的 效果 如 图 3.3 所 示 ， 而 设置 了 文档 视 口 之 后 ， 所 呈现 的 效果 如 图 3.4 所 示 


<l!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 设置 文档 视 口 </title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 

<body> 

<h1l>width=device-width, initial-scale=1</h1> 

<p>width=device-width 将 layout viewport ( 布局 视 口 ) 的 宽度 设置 为 ideal viewport ( 理想 视 口 ) 的 宽度 。</p> 
<p>initial-scale=1 表示 将 layout viewport ( 布局 视 口 ) 的 宽度 设置 为 ideal viewport ( 理想 视 口 ) 的 宽度 。</p> 
</body> 

</html> 


党 提示 : ideal viewport ( 理想 视 口 ) 通常 就 是 我 们 说 的 设备 的 屏 莫 分 辨 率 。 


本 x 局 


| 1 

Googe | | 
width=device- 
width, initial- 
scale=1 


dath=device mlcth 转 ayoULviewport (有 
后 视 吕 ) 的 守 度 设置 为 Heal vewport( 理 


强 视 口 ) 的 帘 度 . 
nicakscale=1 表 示 区 youtviewport( 布 


图 3.3 默认 被 缩小 的 页 面 视图 图 3.4 保持 正常 的 布局 视图 


。49 。 


7Hss 各色 Wet 开发 从 入 站 到 茜 适 ( 稚 课 精 线 ) 


| ee 
| 本 节 为 线 上 拓展 内 容 ， 介 绍 移动 端 HTML5 head 头 部 信息 设置 说 明 。 本 节 内 容 相对 专业 ， 线 上 赔 读 
F 发 人 员 阅读 或 参考 ， 对 于 初级 读者 来 说 ， 建 议 有 选择 性 地 跳 读 ， 或 者 作为 案头 参考 资料 ， 需 要 
。 详 细 内 容 请 扫 码 阅读 。 


3.2 构建 基本 结构 


HTML 文档 的 主体 部 分 包括 了 要 在 浏览 器 中 显示 的 所 有 信息 。 这 些 信息 需 要 在 特定 的 结构 中 呈现 ， 下 
| 面 介绍 网 页 通用 结构 的 设计 方法 。 


3.2.1 定义 文档 结构 


HIML5 包含 一 百 多 个 元 素 ， 大 部 分 继承 自 HIML4， 新 增加 30 个 元 素 。 这 些 元 素 基本 上 都 被 放置 在 主 
体 区 域内 (<body> )， 我 们 将 在 各 章节 中 逐一 进行 说 明 。 
正确 选用 HTML5 元 素 可 以 避免 代码 元 余 。 在 设计 网 页 时 不 仅 需要 使 用 div 元 素来 构建 网 页 通用 结构 ， 


加 hl、h2、h3、h4、h5、h6: 定义 文档 标题 ，1 表示 一 级 标题 ，6 表示 六 级 标题 ， 常 用 标题 包括 一 级 、 
二 级 和 三 级 。 

Pp: 定义 段落 文本 。 

世 、ol、 等 : 定义 信息 列表 、 导 航 列表 、 榜 单 结构 等 。 

table、tr、td 等 ; 定义 表格 结构 。 

form、input、textarea 等 : 定义 表单 结构 。 

span: 定义 行内 包含 框 。 

【示例 】 下 面 的 示例 是 一 个 简单 的 HTML 页 面 ， 使 用 了 少量 的 HTML 元 素 。 它 演示 了 一 个 简单 的 文档 


因 办 办 


第 1 步 ， 新 建文 本 文件 ， 输 入 下 面 的 代码 。 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 一 个 简单 的 文档 包含 内 容 </title> 
</head> 
<body> 
<hl> 我 的 第 一 个 网 页 文档 </h1> 
<p>HTML 文档 必须 包含 三 个 部 分 : </p> 
< 
<li>html 一 一 网 页 包含 框 <0i> 
<li>head 一 一 头 部 区 域 </li> 
<li>body 一 一 主体 内 容 </li> 
</ul> 
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<Jbody> 
</html> 


第 2 步 ,保存 文本 文件 ,命名 为 test， 设置 扩展 名 为 .html。 
第 3 步 ， 使 用 浏览 器 打开 testhtml， 可 以 看 到 如 图 3.5 所 示 的 预览 效果 。 


我 的 第 一 个 网 页 文档 


HTMI 文档 必须 包含 三 个 部 分 ， hl 元素 的 信息 
，head 一 一 头 部 区 域 


图 3.5 网 页 文档 演示 效果 


为 了 更 好 地 选用 元 素 ， 读 者 可 以 参考 w3school 网 站 的 http://www.w3school.com.cn/tags/index.asp 页 面 
信息 。 其 中 DID 列 描述 的 是 元 素 在 哪 一 种 DOCTYPE 文档 类 型 是 允许 使 用 的 : S=Strict，T=Transitional， 


E=Frameset。 


3.2.2 ”定义 内 容 标题 


HTML 提供 了 六 级 标题 用 于 创建 页 面 信息 的 层级 关系 。 使 用 hl 、h2、h3 、h4、hs 或 h6 元 素 对 各 级 标 
题 进行 标记 ， 其 中 hl 是 最 高 级 别 的 标题 ，h2 是 hl 的 子 标题 ，h3 是 h2 的 子 标题 ， 以 此 类 推 。 

【示例 1】 标 题 代 表 了 文档 的 大 纲 。 当 设计 网 页 内 容 时 ， 可 以 根据 需要 为 内 容 的 每 个 主要 部 分 指定 一 个 
标题 和 任意 数量 的 子 标题 ， 以 及 子 子 标题 等 。 

<hl> 唐诗 欣赏 <hl> 

<h2> 春晓 </h2> 

<h3> 孟浩然 <h3> 

<p> 春 眠 不 觉 晓 ， 处 处 闻 啼 鸟 。</p> 

<p> 夜来 风雨 声 ， 花 落 知 多 少 。</p> 


在 上 面 的 示例 中 ， 标 记 为 h2 的 “春晓 ”是 标记 为 hl 的 顶级 标题 “唐诗 欣赏 ”的 子 标题 ， 而 “孟浩然 ” 
是 3， 它 就 成 了 “春晓 ”的 子 标题 ， 也 是 hl 的 子 子 标题 。 如 果 继 续 编写 页 面 其 余部 分 的 代码 ， 相 关 的 内 容 
(段落 、 图 像 、 视 频 等 ) 就 要 紧 跟 在 对 应 的 标题 后 面 。 

对 任何 页 面 来 说 ， 分 级 标题 都 可 以 说 是 最 重要 的 HTML 元 素 。 由 于 标题 通常 传达 的 是 页 面 的 主题 ， 
此 ， 对 搜索 引擎 而 言 ， 如 果 标 题 与 搜索 词 匹配 ， 这 些 标题 就 会 被 赋予 很 高 的 权重 ， 尤 其 是 等 级 最 高 的 hl， 
当然 不 是 说 页 面 中 的 hl 越 多 越 好 ， 搜 索引 擎 还 是 足够 聪明 的 。 

【示例 2】 使 用 标题 组 织 内 容 。 在 下 面 的 示例 中 , 产品 指南 有 3 个 主要 的 部 分 ， 每 个 部 分 都 有 不 


同 层 级 的 子 标题 。 标 题 之 间 的 空格 和 缩 进 只 是 为 了 让 层级 关系 更 清楚 一 些 ， 它 们 不 会 影响 最 终 的 显示 | 


效果 。 
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| 

| 

| 

| 

| <hl> 所 有 产品 分 类 </h1> 

| <h2> 进口 商品 </h2> 

| <h2> 食品 饮料 </h2> 

| <h3> 糖果 /巧克力 </h3> 

| <h4> 巧克力 果冻 </h4> 

<h4> 口香糖 棒 棒 糖 软 糖 奶 糖 QQ 糖 </h4> 
| <h3> 饼干 糕点 </h3> 

| <h4> 饼干 曲 奇 </h4> 

| <h4> 糕点 蛋 卷 面 包 薯 片 /膨化 <h4> 

| <h2> 粮油 副食 </h2> 

| <h3> 大 米面 粉 </h3> 

| <h3> 食用 油 </h3> 

| 

| 


在 默认 情况 下 ， 浏 览 器 会 从 hl ~ h6 逐 级 减 小 标题 的 字号 ， 如 图 3.6 所 示 。 在 默认 情况 下 ， 所 有 的 标题 


| 都 以 粗 体 显示 ，hl 的 字号 比 h2 的 大 ,而 h2 的 又 比 h3 的 大 ， 以 此 类 推 。 每 个 标题 之 间 的 间隔 也 是 由 浏览 器 
| 默认 的 CSS 定制 的 ， 它 们 并 不 代表 HTML 文档 中 有 空 行 。 


© Gam Fr 
所 有 产品 分 类 

| 进口 商品 

| 食品 饮料 

| 
| 


糖果 /巧克力 
丁克 力 果冻 


口香糖 棒 析 糖 软 糖 奶 糖 Q00 糖 


饼干 易 奇 
糯 点 开关 面包 甘 片 化 化 


粮油 副食 


图 3.6 网 页 内 容 标题 的 层级 


这 提示 : 在 创建 分 级 标题 时 ， 要 避免 跳 过 某 些 级 别 ， 如 从 H3 直接 跳 到 h5。 不 过 ， 允 许 从 低级 别 跳 到 高 
级 别 的 标题 。 例如， 在 “<h4> 糕点 蛋 卷 面包 昔 片 /膨化 <h4>” 后 面 紧 跟 着 “<h2> 粮油 副食 
</h2>” 是 没有 问题 的 ， 因 为 包含 “<h4> 糕点 蛋 卷 面包 暮 片 /膨化 <h4>” 的 “<h2> 食品 饮料 
</h2>” 在 这 里 结束 了 ， 而 “<h2> 粮油 副食 </h2>” 的 内 容 开始 了 。 


不 要 使 用 hl ~ h6 标记 副标题 、 标 语 以 及 无 法 成 为 独立 标题 的 子 标题 。 例 如 ,假设 有 一 篇 新 闻 报道 , 它 
| 的 主 标题 后 面 紧 跟着 一 个 副标题 ， 这 时 ， 这 个 副标题 就 应 该 使 用 段落 ， 或 其 他 非 标题 元 素 。 


| <hl> 天 猫 超 市 </h1> 
| <p> 在 平 每 件 生活 小 事 </p> 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
yo 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
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党 提示 : HTML5 包含 了 一 个 名 为 hgroup 的 元 素 ， 用 于 将 连续 的 标题 组 合 在 一 起 ， 后 来 W3C 将 这 个 元 
素 从 HIML5.1 规范 中 移 除 了 。 


<hl> 客观 地 看 日 本 ， 理 性 地 看 中 国 </h1> 


<p class="stibhead"> 日 本 距离 我 们 并 不 远 ， 但 是 如 果真 的 要 说 它 在 这 十 年 、 二 十 年 有 什么 样 的 发 展 和 变化 ， 又 好 


像 对 它 了 解 得 并 不 多 ， 本 文 出 自 一 个 在 日 本 呆 了 快 10 年 的 中 国 作者 ， 来 看 看 他 描述 的 日 本 ,那个 除了 老 
龄 化 和 城市 干净 这 些 标签 之 外 的 真实 国度 。</p> 


上 面 的 代码 是 标记 文章 副标题 的 一 种 方法 。 可 以 定义 class 属性 ， 从 而 能 够 应 用 相应 的 CSS。 该 class 
属性 可 以 命名 为 subhead 等 名 称 。 


将 提示 : 曾 有 人 提议 在 HTMLS5 中 引入 subhead 元 素 ， 用 于 对 子 标题 、 副 标题 、 标 语 、 署 名 等 内 容 进行 
标记 ， 但 是 未 被 W3C 采纳 。 


3.2.3 使 用 div 元 素 


有 时 需要 在 一 段 内 容 外 围 包 一 个 容器 ， 从 而 可 以 为 其 应 用 CSS 样式 或 JavaScript 效果 。 如 果 没有 这 个 
容器 ， 页 面 就 会 不 一 样 。 在 评估 内 容 的 时 候 ， 考 虑 使 用 article 、section、aside、nav 等 元 素 ， 却 发 现 它们 从 
语义 上 来 讲 都 不 合适 。 

这 时 ， 真 正 需要 的 是 一 个 通用 容器 ， 一 个 完全 没有 任何 语义 含义 的 容器 。 这 个 容器 就 是 div 元 素 ， 

户 可 以 为 其 添加 样式 或 JavaScript 效果 。 
【示例 1】 下 面 的 示例 为 页 面 内 容 加 上 div 元 素 以 后 ， 可 以 添加 更 多 样式 的 通用 容器 。 
<div> 
<article> 
<hl> 文章 标题 <hl> 
<p> 文章 内 容 </p> 
<footer> 
<p> 注释 信息 </p> 
<address><a href="#">W3C</a></address> 
</footer> 
</article> 

</div> 

现在 有 一 个 div 元 素 包 着 所 有 的 内 容 ， 页 面 的 语义 没有 发 生 改变 ， 但 现在 我 们 有 了 一 个 可 以 用 CSS 添 
加 样式 的 通用 容器 。 

与 header 、footer 、main 、article 、section 、aside 、nav、hl ~ h6、p 等 元 素 一 样 ， 在 默认 情况 下 ，div 
元 素 自 身 没有 任何 默认 样式 ， 只 是 其 包含 的 内 容 从 新 的 一 行 开始 。 不 过 ， 我 们 可 以 对 div 添加 样式 以 实现 
设计 。 

div 元 素 对 使 用 JavaScript 实现 一 些 特定 的 交互 行为 或 效果 也 是 有 帮助 的 。 例 如 ， 在 页 面 中 展示 一 张 昭 
片 或 一 个 对 话 框 ， 同 时 让 背景 页 面 覆 盖 一 个 半 透 明 的 层 ( 这 个 层 通常 是 一 个 div 元 素 )。 

尽管 HTML 用 于 对 内 容 的 含义 进行 描述 ,但 div 元 素 并 不 是 唯一 没有 语义 价值 的 元 素 。span 元 素 是 与 | 
div 元 素 对 应 的 一 个 元 素 : div 元 素 是 块 级 内 容 的 无 语义 容器 ， 而 span 元 素 则 是 短语 内 容 的 无 语义 容器 ， 例 
如 ， 它 可 以 放 在 段落 元 素 p 之 内 。 | 
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【示例 2】 下 面 的 代码 为 段落 文本 中 的 部 分 信息 进行 分 隔 显 示 ， 以 便 应 用 不 同 的 类 样式 。 
<hl> 新 闻 标 题 <hl> 
<p> 新 闻 内 容 </p> 


<p>......</p> 
<p> 发 布 于 <span class="date">2016 年 12 月 </span>， 由 <span class="author"> 张 三 </span> 编辑 </p> 


央 提示 : 在 HTML 结构 化 元 素 中 ，div 元 素 是 除了 了 h1~h6 以 外 唯一 早 于 HTMLS5 出 现 的 元 素 。 在 HIMLS 
之 前 ，div 元 素 是 包围 大 块 内 容 ( 如 页 眉 、 页 脚 、 主 要 内 容 、 插 图 、 附 栏 等 )， 从 而 可 用 CSS 为 
之 添加 样式 的 不 二 选择 。 之 前 div 元 素 没有 任何 语义 含义 ， 现 在 也 一 样 。 这 就 是 HTML5 引入 
header、footer、main、article、section、aside 和 nav 元 素 的 原因 。 这 些 类 型 的 构造 块 在 网 页 中 
普遍 存在 ， 因 此 它们 可 以 成 为 具有 独立 含义 的 元 素 。 在 HTML5 中 ， div 元 素 并 没有 消失 ， 只 
使 用 它 的 场合 变 少 了 。 


对 article 和 aside 元 素 分 别 添加 一 些 CSS， 让 它们 各 自 成 为 一 栏 。 然 而 ， 大 多 数 情况 下 ， 每 一 栏 都 有 
不 止 一 个 区 块 的 内 容 。 例 如 ， 主 要 内 容 区 第 一 个 article 元 素 下 面 可 能 还 有 男 一 个 article 元 素 ( 或 section 、 
aside 元 素 等 )。 又 如 ， 也 许 想 在 第 二 栏 再 放 一 个 aside 元 素 显示 指向 关于 其 他 网 站 的 链接 ， 或 许 再 加 一 个 其 
他 类 型 的 元 素 。 这 时 可 以 将 期 望 出 现在 同一 栏 的 内 容 包 在 一 个 div 元 素 里 ， 然 后 对 这 个 div 元 素 添加 相应 的 
样式 。 但 是 不 可 以 用 section 元 素 ， 因 为 该 元 素 并 不 能 作为 添加 样式 的 通用 容器 。 

div 元 素 没有 任何 语义 。 大 多 数 时 候 ， 使 用 header、footer、main ( 仅 使 用 一 次 )、article 、section 、aside 
或 nav 元 素 代替 div 元 素 会 更 合适 。 但 是 ， 如 果 语 义 上 不 合适 ， 也 不 必 为 了 刻意 避免 使 用 div 元 素 ， 而 使 用 
上 述 元 素 。div 元 素 适合 所 有 页 面容 器， 可 以 作为 HTMLS5 的 备用 容器 使 用 。 


3.2.4 使 用 id 和 class 


HTML 是 简单 的 文档 标记 语言 ， 而 不 是 界面 语言 。 文 档 结构 大 部 分 使 用 div 元 素来 完成 ， 为 了 能 够 识 
别 不 同 的 结构 ， 一 般 通过 定义 id 或 class 给 它们 赋予 额外 的 语义 给 CSS 样式 提供 有 效 的 “钩子 "。 
【示例 1】 构建 一 个 简单 的 列表 结构 ， 并 给 它 分 配 一 个 i4， 自 定义 导航 模块 。 
i 
<li><a hre 伍 "#"'> 首页 </a></li> 
<li><a hre 伍 "#> 关于 </a></li> 
<li><a hre 伍 "#"> 联系 </a></li> 
</ul> 


使 用 这 标识 页 面 上 的 元 素 时 ，id 名 必须 是 唯一 的 。id 可 以 用 来 标识 持久 的 结构 性 元 素 ， 如 主导 航 或 内 
容 区 域 ; id 还 可 以 用 来 标识 一 次 性 元 素 ， 如 某 个 链接 或 表单 元 素 。 

在 整个 网 站 上 ，id 名 应 该 应 用 于 语义 相似 的 元 素 以 避免 混淆 。 例 如 ， 如 果 联 系 人 表单 和 联系 人 详细 信 
息 在 不 同 的 页 面 上 ， 那 么 可 以 给 它们 分 配 同 样 的 id 名 contact, 但 是 如 果 在 外 部 样式 表 中 给 它们 定义 样式 ， 


| 就 会 遇 到 问题 ， 因 此 使 用 不 同 的 id 名 ( 如 contact_form 和 contact_details ) 就 会 简单 得 多 。 


与 过 不 同 ， 同 一 个 class 可 以 应 用 于 页 面 上 任意 数量 的 元 素 ， 因 此 class 非常 适合 标识 样式 相同 的 对 象 。 
例如 ， 设 计 一 个 新 闻 页 面 ， 其 中 包含 每 条 新 闻 的 日 期 。 此 时 不 必 给 每 个 日 期 分 配 不 同 的 这， 而 是 可 以 给 所 
有 日 期 分 配 类 名 date。 


第 马 章 “设计 移动 页 面 结构 es 


党 提示 : id 和 class 的 名 称 一 定 要 保持 语义 性 ， 并 与 表现 方式 无 关 。 例 如 ， 可 以 给 导航 元 素 分 配 id 名 为 
Tight nav， 因 为 希望 它 出 现在 右边 。 但 是 ， 如 果 以 后 将 它 的 位 置 改 到 左边 ， 那 么 CSS 和 HIML 
就 会 发 生 歧 义 。 所 以 ， 将 这 个 元 素 命名 为 sub_nav 或 nav_main 更 合适 。 这 种 名 称 解释 就 不 再 涉 
及 如 何 表现 它 。 
对 于 class 名 称 ， 也 是 如 此 。 例 如 ， 如 果 定义 所 有 错误 消息 以 红色 显示 ， 不 要 使 用 类 名 red， 而 
应 该 选择 更 有 意义 的 名 称 ， 如 error 或 feedback。 


< 全 注意 : class 和 id 名 称 需 要 区 分 大 小 写 ， 虽 然 CSS 不 区 分 大 小 写 ， 但 是 在 标签 中 是 否 区 分 大 小 写 取决 
于 HTML 文档 类 型 。 如 果 使 用 XHTML 严谨 型 文档 ， 那 么 class 和 id 名 是 区 分 大 小 写 的。 最 好 
的 方式 是 保持 一 致 的 命名 约定 ， 如 果 在 HIML 中 使 用 驼峰 命名 法 ， 那 么 在 CSS 中 也 采用 这 种 
形式 。 


【示例 2】 在 实际 设计 中 ，class 被 广泛 使 用 ， 这 就 容易 产生 滥用 现象 。 例 如 ， 很 多 初学 者 为 所 有 的 元 素 
定义 class， 以 便 更 方便 地 控制 它们 。 这 种 现象 被 称 为 “多 类 症 ”， 在 某 种 程度 上 ， 这 和 使 用 基于 表格 的 布局 
一 样 糟糕 ， 因 为 它 在 文档 中 添加 了 无 意义 的 代码 。 

<hl class="newsHead"> 标题 新 闻 </h1> 

<p class="newsText"> 新 闻 内 容 </p> 


<p>.…</p> 
<p class="newsText"><a href="news.php" class="newsLink"> 更 多 </a></p> 


【示例 3】 在 上 面 的 示例 中 ， 每 个 元 素 都 使 用 一 个 与 新 闻 相关 的 class 名 称 进行 标识 。 这 使 得 新 闻 标题 和 
正文 可 以 采用 与 页 面 其 他 部 分 不 同 的 样式 。 但 是 ， 不 需要 用 这 么 多 class 来 区 分 每 个 元 素 。 可 以 将 新 闻 条 目 
放 在 一 个 包含 框 中 ， 并 加 上 class 名 称 news， 从 而 标识 整个 新 闻 条 目 。 然 后 ， 可 以 使 用 包含 框 选择 器 识别 新 
闻 标 题 或 文本 。 

<div class="news"> 

<hl> 标题 新 闻 </h1> 

<p> 新 闻 内 容 </p> 

<p>.……</p> 

<p><a hre 人 "news.php"> 更 多 </a></p> 

</div> 

以 这 种 方式 删除 不 必要 的 类 有 助 于 简化 代码 ， 使 页 面 更 简洁 。 过 度 依赖 class 名 称 是 不 必要 的 ,我 们 只 
需要 在 不 适合 使 用 id 的 情况 下 对 元 素 应 用 class， 而 且 尽 可 能 少 使 用 class。 实 际 上 ， 创建 大 多 数 文档 常常 只 
需要 定义 几 个 class。 如 果 初 学 者 发 现 自己 定义 了 许多 class， 那么 这 很 可 能 意味 着 自己 创建 的 HTML 文档 结 
构 有 问题 。 


3.2.5 ”使 用 title 


可 以 使 用 tile 属性 为 文档 中 任何 部 分 加 上 提示 标签 。 不 过 ,它们 并 不 只 是 提示 标签 ， 加 上 它们 之 后 屏 
幕 阅读 器 可 以 为 用 户 朗 读 title 文本 ， 因 此 使 用 title 可 以 提升 无 障碍 访问 功能 。 
【示例 】 可 以 为 任何 元 素 添加 tile， 不 过 用 得 最 多 的 是 链接 。 
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es yo ( 微 课 精 编 版 ) 


<li><a hre 伍 "#" title=" 链接 提示 信息 "> 列表 项 目 </a></li> 


| 

| 

| 

| 

| <ul title=" 列表 提示 信息 "> 
| 

| < 

| 

| 


全 A 当 访 问 者 将 鼠标 指向 加 了 说 明 标签 的 元 素 时 ， 就 会 显示 tide。 如 果 img 元 素 同时 包括 fidle 和 alt 属 性， 
则 提示 框 会 采用 title 属性 的 内 容 ， 而 不 是 alt 属性 的 内 容 。 


3.2.6 HTML 注释 


| 示 等 。 这 些 注释 只 会 在 源 代码 中 可 见 ， 访 问 者 在 浏览 器 中 是 看 不 到 它们 的 。 
| 【和 示例 】 下 面 的 代码 使 用 “<!L--” 和 “-->” 分 隔 符 定义 了 6 处 注释 。 

| <!-- 开始 页 面容 器 -> 

| <div class="container"> 

| <header role="banner"></header> 

| <!-- 应 用 CSS 后 的 第 一 栏 --> 

| <main role="main"></main> 

| <!- 结束 第 一 栏 -> 

| <!-- 应 用 CSS 后 的 第 二 栏 -> 

| <div class="sidebar"></div> 

| <!-- 结束 第 二 栏 --> 

| <footer role="contentinfo"></footer> 

| </div> 

| <!-- 结束 页 面容 器 -> 

在 主要 区 块 的 开头 和 结尾 处 添加 注释 是 一 种 常见 的 做 法 ， 这 样 可 以 让 一 起 合作 的 开发 人 员 将 来 修改 代 
| 码 变 得 更 加 容易 。 

在 发 布 网 站 之 前 ， 应 该 用 浏览 器 查看 一 下 加 了 注释 的 页 面 。 这 样 能 帮 有 我 们 避免 由 于 和 弄 错 注释 格式 导致 
| 注释 内 容 直 接 暴 露 给 访问 者 的 情况 。 


3.3 构建 语义 结构 


来 标识 页 面 标题 栏 。header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 


| header 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 表 单 或 相关 的 LOGO 信息 ， 一 般 整 个 页 面 的 标题 应 该 放 在 
| 页 面 的 前 面 。 
| 【示例 1] 在 一 个 网 页 内 可 以 多 次 使 用 header 元 素 ， 下 面 的 示例 显示 为 每 个 内 容 区 块 添加 一 个 header。 
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<header> 

<hl> 网 页 标题 </h1> 
</header> 
<article> 

<header> 

<h1> 文章 标题 </h1> 

</header> 

<p> 文章 正文 </p> 
</article> 


要 应 该 显示 在 头 部 区 域 的 元 素 ， 都 可 以 包含 在 header 元 素 中 。 
【示例 2】 下 面 的 示例 是 个 人 博客 首页 的 头 部 区 域 ， 整 个 头 部 内 容 都 放 在 header 元 素 中 。 


<header> 
<hgroup> 
<hl>LOGO</hl> 
<a href="#">[URL]</a> <a href="#">[ 订阅 ]</a> <a href="#">[ 手机 订阅 ]</a> </hgroup> 
<nav> 
<u> 
<li> 首页 <4i> 
<li><a hre 伍 "#"> 目录 </a></li> 
<li><a hre 伍 "#"> 社区 </a></li> 
<li><a hre 伍 "#"> 微 博 我 </a></li> 


3.3.2 ”定义 导航 


nav 表示 导航 条 ， 用 来 标识 页 面 导航 的 链接 组 。 一 个 页 面 中 可 以 拥有 多 个 nav 元 素 ， 作 为 页 面 整 体 
同 部 分 的 导航 。 具 体 应 用 场景 如 下 : 
回 主 菜 单 导航 。 一 般 网 站 都 设置 有 不 同 层级 的 导航 条 ， 其 作用 是 在 站 内 快速 切换 ， 如 主 菜单 、 
导航 条 、 主 导航 图 标 等 。 


回 ” 侧 边 栏 导航 。 现 在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 当前 文章 或 当 | 


前 商品 跳 转 到 相关 文章 或 商品 页 面 上 去 。 
回 页 内 导航 。 就 是 页 内 锚 点 链接 ， 其 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 
回 翻 页 操作 。 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 


在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声 明 等 ， 这 时 使 用 footer 元 素 是 最 恰当 的 。 


【示例 1】 在 HIML5 中 ， 只 要 是 导航 性 质 的 链接 ， 我 们 就 可 以 很 方便 地 将 其 放 人 nav 元 素 中 。 该 元 


可 以 在 一 个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 。 
<nav draggable="true"> 


<a href="index.html"> 首页 </a> 
<a href="book.html"> 图 书 </a> 
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或 不 


并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 元 素 中 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 即 可 。 例 如 ，| 


人 His 拓 册 zu 开发 从 和 站 到 精通 ( 稚 课 精 线 ) 


<a href="bbs.html"> 论坛 </a> 
</nav> 


上 述 代码 创建 了 一 个 可 以 拖 动 的 导航 区 域 ，nav 元 素 中 包含 了 3 个 用 于 导航 的 超级 链接 ， 即 “首页 ” 


图 书 ” 和 “论坛 "。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导航 。 
【示例 2】 下 面 的 示例 页 面 由 多 部 分 组 成 ， 每 部 分 都 带 有 链接 ， 但 只 将 最 主要 的 链接 放 和 人 了 nav 元 
中 


<hl> 技术 资料 </h1> 
<nav> 
<ul> 
<li><a href="/"> 主页 </a></li> 
<li><a hre 人 blog"> 博客 </a></li> 
</u> 
</nav> 
<article> 
<header> 
<hl>HTML5+CSS3</h1l> 
<nav> 
<ul> 
<li><a href="#HTML5">HTML5</a></li> 
<li><a href="#CSS3">CSS3</a></li> 
</ul> 
</nav> 
</header> 
<section id="HTMLS5"> 
<hl>HTML5</hl> 
<p>HTML5 特性 说 明 </p> 
</section> 
<section id="CSS3"> 
<hl>CSS3</hl> 
<p>CSS3 特性 说 明 。</p> 
</section> 
<footer> 
<p> <a hre 仁 "?edit"> 编辑 </a> | <a hre 仁 "?delete"> 删除 </a> | <a hre 伍 "?add"> 添加 </a> </p> 
</footer> 
</article> 
<footer> 
<p><small> 版 权 信 息 </small></p> 
</footer> 


在 这 个 例子 中 ， 第 一 个 nav 元 素 用 于 页 面 导航 ， 将 页 面 跳 转 到 其 他 页 面 上 去 ， 如 跳 转 到 网 站 主页 或 博 


客 页 面 ; 第 二 个 nav 元 素 放置 在 article 元 素 中 ， 表 示 在 文章 中 内 进行 导航 。 除 此 之 外 ，nav 元 素 也 可 以 用 于 


| 其 他 所 有 你 觉得 是 重要 的 、 基 本 的 导航 链接 组 中 。 


注意 ， 不 要 用 menu 元 素 代替 nav 元 素 。menu 主要 用 在 一 系列 交互 命令 的 菜单 上 ， 如 快捷 菜单 。 


*58°* 


第 3 章 设计 移动 页 面 结构 


3.3.3 定义 主要 区 域 


main 表示 主要 ， 用 来 标识 网 页 中 的 主要 内 容 。main 元 素 内 容 对 于 文档 来 说 应 当 是 唯一 的 ， 它 不 应 包含 
在 网 页 中 重复 出 现 的 内 容 ， 如 侧 栏 、 导 航 栏 、 版 权 信息 、 站 点 标志 或 搜索 表单 等 。 

注意 ， 由 于 main 元 素 不 对 页 面 内 容 进行 分 区 或 分 块 ， 所 以 不 会 对 网 页 大 岗 产生 影响 。 

【示例 】 下 面 的 页 面 是 一 个 完整 的 主体 结构 。main 元 素 包围 着 代表 页 面 主题 的 内 容 。 


<header role="banner"> 
<nav role="navigation">[ 包含 多 个 链接 的 u]]</nav> 
</header> 
<main role="main"> 
<article> 
<hl id="gaudi"> 主要 标题 <hl> 
<p>[ 页 面 主要 区 域 的 其 他 内 容 ] 
</article> 
</main> 
<aside role="complementary"> 
<hl> 侧 边 标题 </h1> 
<p>[ 附注 栏 的 其 他 内 容 ] 
</aside> 
<footer role="info">[ 版 权 ]</footer> 


main 元 素 在 一 个 页 面 里 仅 使 用 一 次 。 在 main 开始 标签 中 加 上 role="main"， 这 样 可 以 帮助 屏幕 阅读 器 | 


定位 页 面 的 主要 区 域 。 


与 p、header、footer 等 元 素 一 样 ，main 元 素 的 内 容 显示 在 新 的 一 行 ， 除 此 之 外 不 会 影响 现 而 的 侍 何 料 | | 


式 。 如 果 创建 的 是 Web 应 用 ， 应 该 使 用 main 包围 其 主要 的 功能 。 
注意 ， 不 能 将 main 放置 在 article 、aside 、footer 、header 或 nav 元 素 中 。 


3.3.4 定义 文章 块 


article 表示 文章 ， 用 来 标识 页 面 中 一 块 完整 的 、 独 立 的 、 可 以 被 转发 的 内 容 。 
【示例 1】 下 面 的 示例 演示 了 article 元 素 的 应 用 。 


<header role="banner"> 
<nav role="navigation">[ 包含 多 个 链接 的 ul]</nav> 
</header> 
<main role="main"> 
<article> 
<hl id="news"> 区 块 链 “时 代号 " 列车 驶 来 <hl> 
<p> 对 于 精英 们 来 说 ， 这 个 春节 有 点 特殊 。</p> 
<p> 他 们 身 在 曹 营 心 在 汉 ， 他 们 被 区 块 链 搅 动 得 燥热 难耐 ， 在 兴奋 、 焦 虐 、 疏 慌 、 质 是 中 度 过 一 个 湿 攻 
春节 。</p> 
<h2 id="sub1">1. 三 点 钟 无 眠 </h2> 
<p><img src="images/0001.jpg" width="200" /> 春节 期 间 ， 一 个 大 佬 云集 的 区 块 链 群 建立 ， 因 为 有 蔡 文 胜 、 
薛 讲 子 、 徐 小 平等 人 的 参与 ， 群 被 封 上 了 “市 值 万 亿 "。 这 个 名 为 “三 点 钟 无 眠 区 块 链 " 的 群 ， 搅 | 
动 了 一 池 春 水 。</p> 
<h2 id="sub2">2. 被 碾 压 的 春节 </h2> 
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了 eu 和 map 开 友人 和 站 到 精通 ( 狼 课 本色 上 ) 


| 
| 
| 
| 
| <p>.…..</p> 
| 
| 
4 
| 


| 为 了 精简 ， 本 示例 对 文章 内 容 进 行 了 缩写 ， 并 略 去 了 与 上 一 节 相同 的 nav 元 素 代 码 。 尽 管 在 这 个 例子 
Note 里 只 有 段落 和 图 像 ， 但 article 元 素 可 以 包含 各 种 类 型 的 内 容 。 

现在 , 页 面 有 了 header、nav、main 和 article 元 素 ， 以 及 它们 各 自 的 内 容 。 在 不 同 的 浏览 器 中 ，article 
元 素 中 标题 的 字号 可 能 不 同 。 可 以 应 用 CSS 使 它们 在 不 同 的 浏览 器 中 显示 相同 的 大 小 。 

在 HIML5 中 ，article 元 素 表示 文档 、 页 面 、 应 用 或 网 站 中 一 个 独立 的 容器 ， 原 则 上 是 可 独立 分 配 或 可 
| 再 用 的 。 它 可 以 是 一 篇 论坛 帖子 、 一 篇 杂志 或 报纸 文章 、 一 篇 博客 条 目 、 一 则 用 户 提交 的 评论 、 一 个 交互 
| 式 的 小 部 件 或 小 工具 ,或 者 任何 其 他 独立 的 内 容 项 。 其 他 article 元 素 的 例子 包括 电影 或 音乐 评论 、 案 例 研 
| 究 、 产 品 描述 等 。 这 些 确定 是 独立 的 、 可 再 分 配 的 内 容 项 。 
| 可 以 将 article 元 素 典 套 在 另 一 个 article 元 素 中 ， 只 要 里 面 的 article 元 素 与 外 面 的 article 元 素 是 部 分 与 
整体 的 关系 。 一 个 页 面 可 以 有 多 个 article 元 素 。 例 如 ， 博 客 的 主页 通常 包括 几 篇 最 新 的 文章 ， 其 中 每 一 篇 
| 都 是 其 自身 的 article 元 素 。 一 个 article 元 素 可 以 包含 一 个 或 多 个 section 元 素 。 在 article 元 素 里 包含 独立 的 
| hl ~ h6 元 素 。 
| 【示例 2】 上 面 的 示例 只 是 使 用 article 元 素 的 一 种 方式 ， 下 面 看 看 其 他 的 用 法 。 下 面 的 示例 展示 了 对 基 
| 本 的 新 闻 报道 或 报告 进行 标记 的 方法 。 注 意 footer 和 address 元 素 的 使 用 。 这 里 ，address 元 素 只 应 用 于 其 父 
| 元 素 article ( 即 这 里 显示 的 article )， 而 非 整个 页 面 或 任何 典 套 在 那个 article 元 素 里 面 的 article 元 素 。 


| 
| <article> 
| <hl id="news"> 区 块 链 “ 时 代号 " 列车 驶 来 <hl> 
| <p> 对 于 精英 们 来 说 ， 这 个 春节 有 点 特殊 。</p> 
<!-- 文章 的 页 脚 ， 并 非 页 面 级 的 页 脚 -> 
<footer> 
<p> 出 处 说 明 </p> 
<address> 
访问 网 址 <a hre 人 "https://www.huxiu.comy/article/233472.html"> 虎 嗅 </a> 
</address> 


【示例 3】 下 面 的 示例 展示 了 髓 套 在 父 元 素 article 里 面 的 article 元 素 。 本 例 中 榜 套 的 article 元 素 是 用 户 
| 提交 的 评论 ， 就 像 在 博客 或 新 闻 网 站 上 见 到 的 评论 部 分 。 本 例 还 显示 了 section 元 素 和 time 元 素 的 用 法 。 这 
| 些 只 是 使 用 article 及 有 关 元 素 的 几 个 常见 方式 。 


<article> 
<hl id="news"> 区 块 链 “ 时 代号 " 列车 驶 来 </h1> 
<p> 对 于 精英 们 来 说 ， 这 个 春节 有 点 特殊 。</p> 
<section> 
<h2> 读者 评论 </h2> 
<article> 
<footer> 发 布 时 间 
<time datetime="2018-02-20">2018-2-20</time> 
| </footer> 
| <p> 评论 内 容 </p> 
| </article> 
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| 

| 

| 

| 

<article>[ 下 一 则 评论 ]</article> | 
</section> | 
</article> | 
| 

E 

| 


每 条 读者 评论 都 包含 在 一 个 article 元 素 里 ， 这 些 article 元 素 则 做 套 在 主 article 元 素 里 。 
3.3.5 定义 区 块 | 
| 
| 


section 表示 区 块 ， 用 于 标识 文档 中 的 节 ， 在 页 面 上 多 对 内 容 进 行 分 区 ， 例 如 ， 章 节 、 页 眉 、 页 脚 或 文 | 
档 中 的 其 他 部 分 。 | 
【 汰 析 】 | 
div 元 素 也 可 以 用 来 对 页 面 进行 分 区 ， 但 section 元 素 并 非 一 个 普通 的 容器 。 当 一 个 容器 需要 被 直接 定 | 
义 样 式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div， 而 非 section 元 素 。 | 
div 元 素 关注 结构 的 独立 性 ， 而 section 元 素 关注 内 容 的 独立 性 ，section 元 素 包 含 的 内 容 可 以 单独 存储 | 
到 数据 库 中 ， 或 输出 到 Word 文档 中 。 | 
【示例 1】 一 个 section 区 块 通常 由 标题 和 内 容 组 成 。 下 面 的 示例 使 用 section 元 素 包围 排行 版 的 内 容 ，| 
作为 一 个 独立 的 内 容 块 进行 定义 。 | 


<hl> 新 歌 榜 </hl> 
<ol> 
<li><a hre 伍 "#"> 爸爸 去 哪儿 <p class="ui-li-aside"> 群星 </p></a></li> 
<li><a hre 仁 "#"> 爱 ， 不 解释 <p class="ui-li-aside"> 张杰 </p></a></li> 
<li><a hre 伍 "#"> 爱 无 反 顾 <p class="ui-li-aside"> 姚 贝 娜 </p></a></li> 
<li><a hre 伍 "#"> 房间 <p class="ui-li-aside"> 刘 瑞 琦 </p></a></li> | 
<li><a hre 伍 "#"> 动人 的 传说 <p class="ui-li-aside"> 杭 娇 </p></a></li> | 
<li><a hre 仁 "#"> 泼墨 <p class="ui-li-aside"> 周华健 </p></a></li> | 
<li><a hre 仁 "#"> 一 起 摇摆 <p class="ui-li-aside"> 汪峰 </p></a></li> | 
<li><a hre 伍 "#"> 就 当 是 你 为 了 我 <p class="ui-li-aside"> 许诺 </p> </a></li> 
<li><a hre 伍 "#">Summer Time<p class="ui-li-aside"> 吉 克 售 逸 </p></a></li> | 
<li><a hre 伍 "#"> 不 值得 <p class="ui-li-aside"> 曾 一 鸣 </p></a></li> | 
</ol> | 
</section> | 
| 
| 
| 
| 
| 
| 
| 


| 
| 
| 
| 
| 
<section cite="http://music.baidu.com/"> | 
| 
| 
| 
| 
| 


section 元 素 包含 cite 属性 ， 用 来 定义 section 的 URL。 如 果 section 摘自 Web 的 话 ， 可 以 设置 该 属性 。 
【 济 析 】 | 
article 和 section 都 是 HIMLS 新 增 的 元 素 ， 它 们 都 是 用 来 区 分 不 同 内 容 ， 用 法 也 相似 ， 从 语义 角度 分 | 
析 两 者 区 分 很 大 。 | 
回 article 代表 文档 、 页 面 或 者 应 用 程序 中 独立 、 完 整 的 可 以 被 外 部 引用 的 内 容 。 因 为 article 是 一 段 独 | 
立 的 内 容 ， 所 以 article 通常 包含 header 和 footer 结构 。 
回 section 用 于 对 网 站 或 者 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。 一 个 section 通常 由 内 容 和 标题 组 成 。| 
因此 ， 需 要 包含 一 个 标题 ， 一 般 不 用 包含 header 或 者 footer 结构 。 | 
通常 使 用 section 元 素 为 那些 有 标题 的 内 容 进 行 分 段 ， 类 似 文章 分 段 操作 。 相 邻 的 section 内 容 ， 应 当 是 | 
相关 的 ， 而 不 像 article 之 间 各 自 独立 。 | 
【示例 2】 下 面 的 示例 混用 article 和 section 元 素 ， 从 语义 上 比较 两 者 不 同 。article 内 容 强调 独立 性 、 完 | 
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| 整 性 ， section 内 容 强 调 相 关 性 。 


<article> 
<header> 
<hl> 蝶 恋 花 <hl> 
<h2> 曼殊 </h2> 
</header> 
<p> 槛 菊 愁 烟 兰 泣 露 ， 罗 幕 轻 寒 ， 燕子 双飞 去 。 明 月 不 说 离 恨 苗 ， 斜 光 到 晓 穿 朱 户 。</p> 
<p> 昨夜 西风 凋 状 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 。 欲 寄 彩 签 兼 尺 素 ， 山 长 水 阔 知 何 处 。</p> 
<section> 
<h2> 解析 </h2> 
<article> 
<h3> 注释 </h3> 
<p> 槛 : 栏杆 。</p> 
<p> 罗 幕 : 丝 罗 的 帷幕 ， 富 贵人 家 所 用 。</p> 
<p> 朱 户 : 狂言 朱 门 ， 指 大 户 人 家 。</p> 
<p> 尺 素 : 书信 的 代称 。</p> 
</article> 
<article> 
<h3> 评析 </h3> 
<p> 此 词 经 玻 洲 的 笔墨 、 温 婉 的 格调 、 说 严 的 章法 ， 传 达 出 作者 的 暮 秋 怀 人 之 情 。 </p> 
<p> 上 片 由 苑 中 景物 起 笔下 片 写 登楼 望 远 。 以 无 可 奈何 的 帐 问 作 结 ， 给 人 情 也 悠悠 、 恨 也 悠悠 之 感 。 </p> 
</article> 


【追问 】 

既然 article 、section 是 用 来 划分 区 域 的 ， 又 是 HTMLS5 的 新 元 素 ， 那么 是 否 可 以 用 article 、section 取代 
a 来 布局 网 页 呢 ? 

答案 是 否定 的 ，div 的 用 处 就 是 用 来 布局 网 页 ， 划 分 大 的 区 域 ， 所 以 我 们 习惯 性 地 把 div 当成 了 一 个 容 
器 。 而 HIML5 改变 了 这 种 用 法 ， 它 让 div div 就 是 用 来 布局 的 ， 在 不 同 的 内 容 块 中 , 我 们 

照 需求 添加 article 、section 等 内 容 块 ， 并 且 显 示 其 中 的 内 容 ， 这 样 才 是 合理 的 使 用 这 些 元 素 。 

因此 ， 在 使 用 section 元 素 时 应 该 注意 几 个 问题 : 

不 要 将 section 元 素 当 作 设 置 样式 的 结构 容器 ， 对 于 此 类 操作 应 该 使 用 div 元 素 实现 。 

回 如 果 article 、aside 或 nav 元 素 更 符合 语义 使 用 条 件 ， 不 要 首选 使 用 section 元 素 。 

不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 

【补充 】 

使 用 HIMLS 大 纲 工具 ( http://gsnedders.html5.org/outliner/ ) 来 检查 页 面 中 是 否 有 没 标题 的 section， 如 
| 果 使 用 该 工 人 发 现 某 个 section 的 说 明 中 有 “untitiled section”( 没有 标题 的 section )， 这 个 


section 就 有 可 能 使 ， 但 是 nav 元 素 和 aside 元 素 没 有 标题 是 合理 的 。 
【示例 3】 te article 和 section 混用 的 情景 。 
<article> 
<hl>W3C</hl> 


<p> 万 维 网 联盟 ( World Wide Web Consortium，W3C )， 又 称 W3C 理事 会 。1994 年 10 月 在 麻 省 理工 学 院 计算 
机 科学 实验 室 成 立 。 建 立 者 是 万 维 网 的 发 明 者 蒂 姆 &middot: 伯 纳 斯 - 李 。</p> 


<section> 
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a 


| 
<h2>Css</h2> | 
<p> 全 称 Cascading Style Sheet ( 级 联 样式 表 )， 通 常 又 称 为 “风格 样式 表 ( Style sheet ”， 它 是 用 来 进行 网 页 
风格 设计 的 。</p> | 
</section> | ff 
<section> | 
<p> 全 称 Hypertext Markup Language ( 超 文本 标记 语言 )， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> Note 
</section> | 
</article> 


| 
| 
| 
| 
在 上 面 的 示例 中 ,首先 可 以 看 到 整个 版 块 是 一 段 独立 的 、 完 整 的 内 容 ， 因 此 使 用 article 元 素 标识 。 该 
| 
| 


内 容 是 一 篇 关于 W3C 的 简介 ， 该 文章 分 为 3 段 ， 每 一 段 都 有 一 个 独立 的 标题 ， 因 此 使 用 了 两 个 section 元 | 
素 区 分 。 | 
【追问 】 
为 什么 没有 对 第 一 段 使 用 section 元 素 呢 ? | 
其 实 是 可 以 使 用 的 ， 但 是 由 于 其 结构 比较 清晰 ， 浏 览 器 能 够 识别 第 一 段 内 容 在 一 个 section 内 ， 所 以 也 | 
可 以 将 第 一 个 section 元 素 省 略 ， 但 是 如 果 第 一 个 section 元 素 里 还 要 包含 子 section 元 素 或 子 article 元 素 ，| 
那么 就 必须 标识 section 元 素 。 | 
【示例 4】 下 面 是 一 个 包含 article 元 素 的 section 元 素 示例 。 


<hl>W3C</hl> 
<article> 
<h2>CSS</h2> | 
<p> 全 称 Cascading Style Sheet ( 级 联 样式 表 )， 通 常 又 称 为 “风格 样式 表 ( Style Sheet ”， 它 是 用 来 进行 网 页 
风格 设计 的 。</p> | 


| 
| 
| 
| 
<section> | 
| 
| 
| 
| 


</article> 
<h2>HTML</h2> 
<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> 
</section> 
这 个 示例 比 第 一 个 示例 复杂 了 。 首 先 ， 它 是 一 篇 文章 中 的 一 段 ， 因 此 没有 使 用 article 元 素 。 但 是 ，| 


| 
| 
| 
在 这 一 段 中 有 几 块 独立 的 内 容 ， CR 立 的 article 元 素 。 | 
在 HIML5 中 ，article 可 以 是 一 种 特殊 功能 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 section | 

元 素 强 调 分 段 或 分 块 ， 而 article 强调 独立 性 。 具 体 来 说 ， 如 果 一 块 内 容 相 对 来 说 比较 独立 、 完 整 的 时 候 ， 
应 该 使 用 article 元 素 , 但 是 如 果 想 将 一 块 内 容 分 成 几 段 的 时 候 ， 应 该 使 用 section 元 素 。 
| 

| 

| 

| 

| 

| 


在 HIML5 中 ，div 变 成 了 一 种 容器 ， 当 应 用 CSS 样式 的 时 候 ， 可 以 对 这 个 容器 进行 一 个 总 体 的 CSS | 
样式 的 套用 。 因 此 ， 可 以 将 页 面 的 所 有 从 属 部 分 ， 如 导航 条 、 菜 单 、 版 权 说 明 等 ， 包 含 在 一 个 统一 的 页 面 
结构 中 ， 以 便 统一 使 用 CSS 样式 来 进行 装饰 。 


3.3.6 定义 附 栏 


aside 表示 侧 边 ， 用 来 标识 所 处 内 容 之 外 的 内 容 。aside 内 容 应 该 与 所 处 的 附近 内 容 相关 。 例 如 ， 当 前 页 
面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 内 容 相关 的 引用 、 侧 边 广告 、 导 航 条 ， 以 及 其 他 
类 似 的 有 别 于 主要 内 容 的 部 分 。 | 
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Vs 


aside 元 素 主 要 有 以 下 两 种 用 法 。 
加 ”作为 主体 内 容 的 附属 信息 部 分 ， 包含 在 article 中 ，aside 内 容 可 以 是 与 当前 内 容 有 关 的 参考 


资料 、 


【示例 1】 下 面 的 示例 设计 了 一 篇 文章 ,文章 标题 放 在 header 中 ， 在 header 后 面 将 所 有 关于 文章 的 部 分 


| 放 在 了 一 个 article 中 ,将 文章 正文 放 在 一 个 p 元 素 中 。 该 文章 包含 一 个 名 词 注释 的 附属 部 分 ， 因 此 在 正文 


| 下 面 放置 了 一 个 aside 元 素 ， 用 来 存放 名 词 解 释 的 内 容 。 


<header> 
<hl>HTML5</h1l> 
</header> 


<hl>HTMLS5 历史 </h1> 


<p>HTMLS5 草案 的 前 身 名 为 Web Applications 1.0， 于 2004 年 被 WHATWG 提出 ， 于 2007 年 被 W3C 接 


| 
| 
| 
| 
| <article> 
| 
| 
| 


月 28 日 ，W3C 的 HTML 工作 组 正式 发 布 了 HTMLS5 的 官方 推荐 标准 。</p> 
<aside> 
<hl> 名 词 解释 </h1> 
<dl> 
<dt>WHATWG</dt> 


纳 ， 并 成 立 了 新 的 HTML 工作 团队 。HTMLS 的 第 一 份 正 式 草案 已 于 2008 年 1 月 22 日 公布 。2014 年 10 


<dd>WHATWG ( Web Hypertext Application Technology Working Group )，HTML 工作 开发 组 的 简称 ， 


</d> 
<d> 
<dt>W3C</d> 
<dd>World Wide Web Consortium ( 万 维 网 联盟 )， 是 国际 著名 的 标准 化 组 织 。1994 年 成 立 后 ， 
至 今 已 发 布 近 百 项 相关 万 维 网 的 标准 ， 对 万 维 网 发 展 做 出 了 杰出 的 贡献 。</dd> 


| 
| 
| 
| 
| 目前 与 W3C 组 织 同时 研发 HIML5。</dd> 
| 
I 
中 


aside 被 放置 在 一 个 article 内 部 ， 因 此 引擎 将 这 个 aside 内 容 理解 为 与 article 内 容 相关 联 的 。 


友情 链接 、 最 新 文章 列表 、 最 新 评论 列表 、 历 史 存档 、 日 历 等 。 
【示例 2】 下 面 的 示例 使 用 aside 元 素 为 个 人 博客 添加 一 个 友情 链接 辅助 版 块 。 


<aside> 
<nav> 
<h2> 友情 链接 </h2> 
<u> 
<li> <a hre 伍 "#"> 网 站 1</a></li> 
<li> <a hre 伍 "#"> 网 站 2</a></li> 
<li> <a hre 伍 "#"> 网 站 3</a></li> 
</ul> 
</nav> 
</aside> 


| 版 块 又 具有 导航 作用 ， 因 此 嵌 套 了 一 个 nav 元素， 该 侧 边栏 的 标题 是 “ “友情 链接 "， 放 在 了 h2 元 素 中 
' 标题 之 后 使 用 了 一 个 也 列表， 用 来 存放 具体 的 导航 链接 列表 。 
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回 ”作为 页 面 或 站 点 辅助 功能 部 分 ， 在 article 之 外 使 用 。 最 典型 的 形式 是 侧 边栏 ， 其 中 的 内 容 可 以 是 


友情 链接 在 博客 网 站 中 比较 常见 ， 一 般 放 在 左右 两 侧 的 边栏 中 ,因此 可 以 使 用 aside 来 实现 ,但 是 这 个 


在 
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3.3.7 ”定义 页 脚 


footer 表示 脚注 ， 用 来 标识 文档 或 节 的 页 脚 。footer 元 素 表 示 嵌 套 它 的 最 近 的 article 、aside 、blockquote、 | 
body、details、fieldset、figure、nav、section 或 td 元 素 的 页 脚 。 只 有 当 它 最 近 的 祖先 是 body 元 素 时 ， 它 才 是 | 


整个 页 面 的 页 脚 。 


如 果 一 个 footer 元 素 包 着 它 所 在 区 块 ( 如 一 个 article 元 素 ) 的 所 有 内 容 ， 它 代表 的 是 像 附录 、 索 引 、| 


版 权 页 、 许 可 协议 这 样 的 内 容 。 


页 脚 通常 包含 关于 它 所 在 区 块 的 信息 ， 如 指向 相关 文档 的 链接 、 版 权 信 息 、 作 者 及 其 他 类 似 条 目 。 页 | 


脚 并 不 一 定 要 位 于 所 在 元 素 的 末尾 ， 不 过 通常 是 这 样 的 。 


【示例 1】 下 面 的 示例 中 的 footer 元 素 代表 页 面 的 页 脚 ， 因 为 它 最 近 的 祖先 是 body 元 素 。 


<header role="banner"> 
<nav Iole="navigation"> 链接 列表 </nav> 
</header> 
<main role="main"> 
<article> 
<hl id="gaudi"> 主要 标题 <hl> 
<h2> 次 标题 </h2> 
</article> 
</main> 
<aside role="complementary"> 
<hl> 次 标题 </h1l> 
</aside> 
<footer> 
<p><small> 版 权 信 息 </small></p> 
</footer> 


页 面 有 了 header、nav、main 、article 、aside 和 footer 元 素 ， 当 然 并 非 每 个 页 面 都 需要 以 上 所 有 元 素 ， | 


但 它们 代表 了 HTML 中 的 主要 页 面 构成 要 素 。 


footer 元 素 本 身 不 会 为 文本 添加 任何 默认 样式 。 这 里 ， 版 权 信息 的 字号 比 普通 文本 的 小 ， 这 是 因为 它 税 


套 在 small 元 素 里 。 像 其 他 内 容 一 样 ， 可 以 通过 CSS 修改 footer 元 素 所 含 内 容 的 字号 。 


党 提示 : 不 能 在 footer 元 素 里 训 套 header 元 素 或 另 一 个 footer 元 素 。 同 时 ， 也 不 能 将 footer 元 素 识 套 在 


header 或 address 元 素 里 。 


【示例 2】 在 下 面 的 示例 中 ， 第 一 个 footer 元 素 包含 在 article 元 素 内 ， 因 此 是 属于 该 article 元 素 的 页 脚 。| 
第 二 个 footer 元 素 是 页 面 级 的 。 只 能 对 页 面 级 的 footer 元 素 使 用 role="contentinfo”， 


一 次 。 
<article> 
<hl> 文章 标题 <hl> 
<p> 文章 内 容 </p> 


<footer> 
<p> 注释 信息 </p> 
<address><a href—="#">W3C</a></address> 
</footer> 
</article> 
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且 一 个 页 面 只 能 使 用 | 
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<footer role="contentinfo"> 版 权 信息 </footer> 


| 
| 
| 
A 338 使 用 role 


JNote | role 是 HTMLS5 新 增 属性 ， 其 作用 是 告诉 Accessibility 类 应 用 ( 如 屏幕 阅读 器 等 ) 当前 元 素 所 扮演 的 角 
| 色 ， 主 要 是 供 残 疾 人 使 用 。 使 用 role 可 以 增强 文本 的 可 读 性 和 语义 化 。 
| 在 HTMLS5 元 素 内 ， 标 签 本 身 就 是 有 语义 的 ， 因 此 role 作为 可 选 属性 使 用 ,但 是 在 很 多 流行 的 框架 ( 如 


| 
| 
Bootstrap ) 中 都 很 重视 类 似 的 属性 和 声明 ， 目 的 是 为 了 兼容 老 版 本 的 浏览 器 ( 用 户 代理 )。 

| role 属性 主要 应 用 于 文档 结构 和 表单 中 。 例 如 ， 设 置 输入 密码 框 ， 对 于 正常 人 可 以 用 placaeolder 提示 
| 

| 

| 


输入 密码 ， 但 是 对 于 残障 人 士 是 无 效 的 ， 这 个 时 候 就 需要 role 了。 另外， 在 老 版 本 的 浏览 器 中 ， 由 于 不 支 
持 HIML5 元 素 ， 所 以 有 必要 使 用 role 属性 。 
例如 ， 下 面 的 代码 告诉 屏幕 阅读 器 ， 此 处 有 一 个 复 选 框 ， 且 已 经 被 选中 。 


<div role="checkbox" aria-checked="checked"> <input type="checkbox" checked></div> 

| 下面 是 常用 的 role 角色 值 。 

| 回 role="banner" (横幅 ) 

| 面向 全 站 的 内 容 ， 通 常 包含 网 站 标志 、 网 站 赞助 者 标志 、 全 站 搜索 工具 等 。 横 幅 通 常 显示 在 页 面 的 顶 
| 

| 

| 

| 

| 


| 端 ， 而 且 通常 横 跨 整 个 页 面 的 宽度 。 
使 用 方法 : 将 其 添加 到 页 面 级 的 header 元 素 ， 每 个 页 面 只 用 一 次 。 
回 role="navigation" ( 导航 ) 
hd (通常 为 链接 ) 的 集合 。 
| 使 用 方法 : 与 nav 元 素 是 对 应 关系 。 应 将 其 添加 到 每 个 nav 元 素 ， 或 其 他 包含 导航 性 链接 的 容器 。 这 个 
| 角色 可 在 每 个 页 面 上 使 用 多 次 ， 但 是 同 nav 元 素 一 样 ， 不 要 过 度 使 用 该 属性 。 
回 role="main" (主体 ) 
| 文档 的 主要 内 容 。 
| 使 用 方法 : 与 main 元 素 是 对 应 关系 。 最 好 将 其 添加 到 main 元 素 ， 也 可 以 添加 到 其 他 表示 主体 内 容 的 
| 元 素 ( 可 能 是 div )。 在 每 个 页 面 仅 使 用 一 次 。 
| 回 role="complementary"( 补充 性 内 容 ) 
| 文档 中 作为 主体 内 容 补充 的 支撑 部 分 。 它 对 区 分 主体 内 容 是 有 意义 的 。 
| 使 用 方法 : 与 aside 元 素 是 对 应 关系 。 应 将 其 添加 到 aside 或 div 元 素 ( 前 提 是 该 div 仅 包含 补充 性 内 
| 容 )。 可 以 在 一 个 页 面 里 包含 多 个 complementary 角色 ， 但 不 要 过 度 使 用 。 
| 回 role="contentinfo" ( 内 容 信息 ) 
包含 关于 文档 的 信息 的 大 块 、 可 感知 区 域 。 A EE, 
| 
| 
| 
| 
| 
| 
| 
| 
| 


使 用 方法 : 将 其 添加 至 整个 页 面 的 页 脚 ( 通常 为 footer 元 素 )。 每 个 页 面 仅 使 用 一 
【示例 】 下 面 的 代码 演示 了 文档 结构 中 如 何 应 用 role。 
<!-- 开始 页 面容 器 -> 
<div class="container"> 
<header role="banner"> 
<nav role="navigation">[ 包含 多 个 链接 的 列表 ]</nav> 
</header> 
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<main role="main"> 
<article></article> 
<article></article> 


| 
| 
| 
| 
<!-- 应 用 CSS 后 的 第 一 栏 > | 
| 
| 
| 
[其 他 区 块 ] | 


</main> | 
< 结束 第 _ 栏 -> EZ 


<!-- 应 用 CSS 后 的 第 二 栏 -> 
<div class="sidebar"> | 
<aside role="complementary"></aside> | 
<aside role="complementary"></aside> | 
[其 他 区 块 ] | 
</div> | 
<! 一 结束 第 二 栏 --> | 
<footer role="contentinfo"></footer> | 
</div> | 

<!-- 结束 页 面容 器 -> 
| 


注意 ， 即 便 不 使 用 role， 页 面 看 起 来 也 没有 任何 差别 ， 但 是 使 用 它们 可 以 提升 使 用 辅助 设备 的 用 户 的 
体验 。 出 于 这 个 理由 ， 推 荐 使 用 它们 。 

对 表单 元 素来 说 ，form 是 多 余 的 ; search 用 于 标记 搜索 表单 ; application 则 属于 高 级 用 法 。 当 然 ,不 要 | 
在 页 面 上 过 多 地 使 用 地 标 角色 。 过 多 的 role 角色 会 让 屏幕 阅读 器 用 户 感到 累 次， 从 而 降低 role 的 作用 , 影 | 
响 整体 体验 。 | 


3.4 案例 实战 


本 节 将 借助 HTMLS5 新 元 素 设计 一 个 博客 首页 | 


第 1 步 ， 新 建 HIMLS 文档 ,保存 为 testl.html。 | 

第 2 步 ， 根 据 上 面 各 节 介绍 的 知识 ， 开 始 构建 个 人 博客 首页 的 框架 结构 。 在 设计 结构 时 ， 最 大 限度 地 | 
选用 HTML5 新 结构 元 素 ， 所 设计 的 模板 页 面 基本 结构 代码 如 下 所 示 。 | 
<header> | 
<hl>[ 网 页 标题 ]</h1> | 

<h2>[ 次 级 标题 ]</h2> | 

<h4>[ 标题 提示 ]</h4> | 
</header> | 
<DaV> | 

<h3>[ 导航 栏 ]</h3> | 

<a hre 人 ="#"> 链接 1</a> <a hre 仁 "#'> 链接 2</a> <a hre 仁 "#"> 链接 3</a> | 

</nav> | 
<section> | 

<h2>[ 文章 块 ]</h2> | 

<article> | 
<header> | 


<hl>[ 文章 标题 ]</hl> | 
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>] 


</header> 
<p>[ 文章 内 容 ]</p> 
<footer> 


<h2>[ 文 章 脚注 ]</h2> 


</footer> 
</article> 


</section> 
<aside> 


<h3>[ 辅助 信息 ]</h3> 


</aside> 
<footer> 


<h2>[ 网 页 脚注 ]</h2> 


</footer> 


</main> 


整个 页 面包 括 两 个 部 分 : 标题 部 分 和 主要 内 容 部 分 。 标 题 部 分 又 包括 网 站 标题 、 次 级 标题 和 标题 提示 
| 信息; 主要 内 容 包 括 4 个 部 分 : 导航 、 文 章 块 、 便 边栏 、 脚 注 。 文 章 块 包括 3 个 部 分 标题 部 分 、 正 文部 分 
| 和 脚注 部 分 。 


第 3 步 ， 


第 4 步 ， 


在 模板 页 面 基 础 上 ， 开 始 细 化 本 示例 博客 首页 。 下 面 仅 给 出 本 例 首页 的 静态 页 面 结 构 ， 如 果 
| 用户 需 要 后 台 i 动态 生成 内 容 ， 则 可 以 考虑 在 模板 结构 基础 上 另外 设计 。 把 testl.html 另存 为 test2.html， 细 化 
| 后 的 静态 首页 效果 如 图 3.7 所 示 。 
| 


€ > C [© ocahoscaoeo/mysite/ test2 nimie 


我 的 小 树林 


初 一 分 浮躁 , 守 一 分 宁静 ， 握 一 份 真诚 ， 携 一 份 善良 ,做 个 简单 的 程序 员 。。。 


专注 于 HTML5、CSS3、JavaScript , 欢迎 各 位 道 友 前 来 论 道 


号 航 
博客 园 首页 新 陨 竺 联系 合理 


戏说 HTML5 


如 果 有 非 技术 人 吴 问 你 ，HTML5 呈 什么， 你 会 怎么 回答 了 


二 明白 他 起 问 的 真正 问题 ， 


。。《 确 地 涪 应 该 中 给 浊 鉴 基 视 定 了 许多 六 的 近 口 标准 , 要 求 临 委 实 现 牛 到 的 功能 。。。 这 蛙 感 澳 红 


后 什么 。 牛 二 的 和 能力、 新 的 接口 | 乱 的 人 各 己 就 是 号 时 


则 人 巷 似 明白 ， 但 又 好 像 少 了 ) 
平 ， 什么 屋 HTML、 什 么 是 CSS、 什 么 是 DOM、 什 么 是 JavaScript , 大 各 分 的 前 崇 开 发 每 天 部 芷 用 这 些 ， A 


设计 页 面 样式 部 分 代码 。 


图 3.7 细 化 后 的 首页 页 面 效 果 


| 党 提示 : 限于 篇 幅 ， 本 节 没 有 展示 完整 的 页 面 代码 ， 读 者 可 以 通过 本 节 示 例 源 代码 了 解 完整 的 页 面 结构 。 


这 里 主要 使 用 了 CSS3 的 一 些 新 特性 ， 如 圆 角 ( border-radius ) 和 旋 


| 转变 换 等 ， 通 过 CSS 设计 的 页 面 显 示 效果 如 图 3.8 所 示 。 相 关 CSS3 技术 介绍 请 参阅 后 面 的 章节 内 容 。 
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滋 提示 : 考虑 到 本 章 重点 学 习 HTMIS 新 元 素 的 应 用 ， 所 以 本 节 示 例 并 不 深入 讲解 CSS 样式 代码 的 设计 过 | 
程 ， 感 兴趣 的 读者 可 以 参考 本 节 示例 源 代码 中 的 test3.html 文档 。 | 


Javascnptlo1) 
sstlQ) 
webgltE) 
ei 


图 3.8 ”博客 首页 的 页 面 完成 效果 | 
第 5 步 ， 对 于 早期 版 本 的 浏览 器 ， 或 者 不 支持 HTMLS 的 浏览 器 ,需要 添加 一 个 CSS 样式 ， 因 为 未 知 | 
元 素 默 认为 行内 显示 (display:inline )， 对 于 HIMLS 结构 元 素来 说 ， 我 们 需要 让 它们 默认 为 块 状 显示 | 


article, section, nav, aside, main, header, hgroup, footer { 
display: block: | 
} 


第 6 步 ， 一些 浏览 器 不 允许 样式 化 不 支持 的 元 素 。 这 种 情形 出 现在 IE8 及 以 前 的 浏览 器 中 ， 因 此 还 需 | 
要 使 用 下 面 的 JavaScript 脚本 进行 兼容 。 


| 
| 
<L-[ifltIE 9]> 
<script> | 
document.createElement("article"): | 
document.createElement("section"): | 
document.createElement("nav” ); | 
document.createElement("aside" ): | 
document.createElement("main” ): | 
document.createElement("header" ): | 
document.createElement("heroup" ): | 
document.createElement("footer" ): | 
</script> | 
<![endif]--> 


第 7 步 ， 如 果 浏 览 器 禁用 了 脚本 ， 则 不 会 显示 ， 可 能 会 出 问题 。 因 为 这 些 元 素 定义 整个 页 面 的 结构 。 | 
为 了 预防 这 种 情况 ， 可 以 加 上 <noscript> 标签 进行 提示 。 


<noscript> 
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<hl> 警告 <hl> 
<p> 因为 你 的 浏览 器 不 支持 HIML5， 一 些 元 素 是 模拟 使 用 JavaScript。 不 幸 的 是 ， 您 的 浏览 器 已 禁用 脚本 。 
请 启用 它 以 显示 此 页 。</p> 
</noscript> 
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车 早 


设计 移动 页 面 正文 


( 获 1 视频 讲解 : 1 小 时 1 分 钟 ) 


移动 网 页 文本 内 容 丰 富 ， 形 式 多 样 ， 通 过 不 同 的 版 式 显 示 在 页 面 中 ， 为 用 户 提供 
了 丰富 的 信息 。HIMLS 新 增 了 很 多 新 的 文本 元 素 ， 它 们 都 有 特殊 的 语义 ， 正 确 使 用 这 
些 元 素 ， 可 以 让 网 页 文本 严谨 、 科 学 。 本 章 将 介绍 各 种 HTML5 文本 元 素 的 使 用 ， 帮 助 
读者 有 效 设计 正文 信息 。 


【学 习 重 点 】 

DI 段落 文本 。 

MI 强调 文本 、 引 述 文本 、 引 用 或 参考 文本 。 
WI 时 间 文 本 、 解 释 缩写 词 。 

了 定义 上 标 和 下 标 、 术 语 。 

DI 联系 信息 、 标 注 文本 。 

I 标记 代码 、 预 定义 格式 。 

I 突出 显示 文本 。 
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4.1 通用 文本 
在 网 页 中 ， 通 用 文本 主要 包括 标题 和 正文 ， 下 面 分 别 进行 介绍 。 


ui 标题 文本 


hl、h2、h3、h4、h5、h6 元 素 可 以 定义 标题 文本 ， 按 级 别 高 低 从 大 到 小 分 别 为 : hl、h2、h3、h4、h5、 
| h6， 它 们 包含 的 信息 依据 重要 性 逐渐 递减 。 其 中 hl 表示 最 重要 的 信息 ， 而 h6 表示 最 次 要 的 信息 。 
【示例 】 下 面 的 示例 根据 文档 结构 层次 ， 定 义 了 不 同 级 别 的 标题 文本 。 
<div id="wrapper"> 
<hl> 网 页 标题 </h1> 
<div id="box2"> 
<h2> 栏目 标题 </h2> 
<div id="sub_box1"> 
<h3> 于 栏目 标题 </h3> 
<p> 正文 </p> 
</div> 
</div> 
</div> 
hl、h2 和 kh3 比较 常用 ，h4、h5 和 h6 不 是 很 常用 ， 除 非 在 结构 层级 比较 深 的 文档 中 才 会 考虑 选用 ， 因 


bn - 般 文 档 的 标题 层次 在 三 级 左右 。 对 于 标题 元 素 的 位 置 ， 应 该 出 现在 正文 内 容 的 顶部 ， 一 般 处 于 容器 的 第 
- 行 。 


4.12 段落 文本 


在 网 页 中 输入 段落 文本 ， 应 该 使 用 p 元素 , 它 是 最 常用 的 HTML 元 素 之 一 。 上 默认 情况 下 ,浏览 器 会 在 
| 村 题 和 上 段落 之 间 ， 以 及 不 同 的 段落 之 间 添 加 重 直 间距 。 
【示例 】 下 面 的 示例 使 用 p 元 素 设 计 了 两 段 诗句。 
<article> 
<hl> 枫 桥 夜 泊 </h1> 
<h2> 唐 代 : 张 继 </h2> 
<p> 月 落 乌 啼 钉 满 天 ， 江 枫 汐 火 对 愁 虐 。</p> 


<p> 姑 苏 城 外 寒山 地， 夜半 钟 声 到 客船 。</p> 
</article> 


可 以 为 段落 添加 样式 ,包括 字体 、 字 号 、 颜 色 等 ， 也 可 以 通过 CSS 改变 段落 文本 的 对 齐 方式 ， 包 括 左 
对齐 、 右 对 齐 和 居中 对 齐 。 
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使 用 ， 


4.2.1 强调 文本 


4.2 描述 文本 


HTML5 淡化 了 元 素 的 修饰 功能 ， 强 调 其 固有 的 语义 性 ， 对 于 极 个 别 的 过 时 的 、 纯 样式 元 素 ， 不 再 建议 
如 font、center、s、strike。 


视频 讲解 | 


strong 元 素 表 示 内 容 的 重要 性 ， 而 em 元 素 则 表示 内 容 的 着 重点 。 根 据 内 容 需要 ， 这 两 个 元 素 既 可 以 单 | 


独 使 用 ， 也 可 以 一 起 使 用 。 | 


【示例 1】 在 下 面 的 代码 中 既 有 strong 元 素 ， 又 有 em 元 素 。 浏 览 器 通常 将 strong 文本 以 粗 体 显 示 ， 而 | | 


将 em 文本 以 斜体 显示 。 如 果 em 是 strong 的 子 元 素 , 将 同时 以 斜体 和 粗 体 显示 文本 。 


<p><strong> 警告 : 不 要 接近 展品 <em> 在 任何 情况 下 </em></strong></p> 


但 它们 的 含义 却 很 不 一 样 。 


| 
不 要 使 用 b 元 素 代 蔡 strong， 也 不 要 使 用 ii 元素 代 蔡 em。 尽 管 它们 在 浏览 器 中 显示 的 样式 是 一 样 的 ， | 
em 元 素 在 句子 中 的 位 置 会 影响 句子 的 含义 。 例 如 ,“<p><em> 你 </em> 看 着 我 </p>” 和 “<p> 你 看 着 

| 


<em> 我 </em></p>” 表 达 的 意思 是 不 一 样 的 。 


【示例 2】 可 以 在 标记 为 strong 的 短语 中 再 笛 套 strong 文本 。 如 果 这 样 做 ， 作 为 另 一 个 strong 的 子 元 素 | 


的 strong 文本 的 重要 程度 会 递增 。 这 种 规则 对 组 套 在 男 一 个 em 里 的 em 文本 也 适用 。 | 


hs 


<p><strong> 记 住 密码 是 <strong>111222333</strong></strong></p> 


其 中 ，111222333 文本 要 比 其 他 strong 文本 更 为 重要 。 

可 以 用 CSS 将 任何 文本 变 为 粗 体 或 斜体 ， 也 可 以 覆盖 strong 和 em 等 元 素 的 浏览 器 默认 显示 样式 。 
注意 ， 在 旧版 本 的 HTML 中 ，strong 所 表示 文本 的 强调 程度 比 em 表示 的 文本 要 高 。 不 过 , 在 HTML5 | 
em 是 表示 强调 的 唯一 元 素 ， 而 strong 元 素 表示 的 则 是 重要 程度 。 


4.2.2 标记 细则 


HIML5 使 用 small 元 素 表示 细则 一 类 的 旁 注 ， 例 如 ， 免 责 声明 、 注 意 事项 、 法 律 限 制 、 版 权 信息 等 。 


【示例 1】small 元 素 通常 是 行内 文本 中 的 一 小 块 ， 而 不 是 包含 多 个 段落 或 其 他 元 素 的 大 块 文本 。 


<dl> 
<dt> 单 人 间 </dt> 
<dd>399 元 <small> 含 早 餐 ， 不 含 税 </small></dd> 
<dt> 双人 间 </dt> 
<dd>599 元 <small> 含 早餐 ， 不 含 税 </small></dd> 
</d> 


| 
| 
| 
| 
| 
| 
| 
| 
有 时 我 们 还 可 以 用 它 来 表示 署名 ， 或 者 满足 许可 要 求 。 | 
| 
| 
| 
| 
| 
| 
| 
| 


一 些 浏览 器 会 将 small 元 素 包含 的 文本 显示 为 小 字号 。 不 过 ， 一 定 要 在 符合 内 容 语义 的 情况 下 使 用 该 元 
| 


， 而 不 是 为 了 减 小 字号 而 使 用 。 
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| 
| 
| 
【示例 2】 在 下 面 的 示例 中 ,第 一 个 small 元 素 表示 简短 的 提示 声明 ， 第 二 个 small 元 素 表 示 包 含 在 页 面 
| 级 footer 里 的 版 权 声明 ， 这 是 一 种 常见 的 用 法 。 

/<p> 现在 订购 免费 送 货 。<small>( 仅 限于 五 环 以 内 ) <Jsmall></p> 
| <footer role="contentinfo"> 


<p><small>&copy: 2018 Baidu 使 用 百度 前 必 读 </small></p> 
ie 


| small 元 素 只 适用 于 短语 ， 因 此 不 要 用 它 标 记 长 的 法 律 声明 ， 如 “使 用 条 款 ” 和 “隐私 政策 ”页 面 。 根 
| 据 需 要 ， 应 该 用 段落 或 其 他 语义 元 素 标记 这 些 内 容 。 

当 提示 : HTMLS 还 支持 big 元 素 ， 用 来 定义 大 号 字体 。big 元 素 包含 的 文字 字体 比 周 国 的 文字 要 大 一 号 ， 
如 果 文字 已 经 是 最 大 号 字体 ， 则 big 元 素 将 不 起 任何 作用 。 用 户 可 以 襄 套 使 用 big 元 素 未 步 放大 


| 
文本 ， 每 一 个 big 元 素 都 可 以 使 字体 大 一 号 ， 直 到 上 限 7 号 文本 。 


4.2.3 ”特殊 格式 


| 

| b 和 i 是 HTML4 遗弃 的 两 个 元 素 , 分 别 表示 粗 体 和 和 斜体 ,HTML5 重新 启用 这 两 个 元 素 ， 作 为 其 他 语 

| 义 元 素 都 不 适应 的 场景 ， 即 作为 最 后 备 选项 使 用 。 

| 回 b: 表示 出 于 实用 目的 提醒 注意 的 文字 ， 不 传达 任何 额外 的 重要 性 ， 也 不 表示 其 他 的 语 态 和 语气 ， 

| 用 于 如 文档 摘要 里 的 关键 词 、 评 论 中 的 产品 名 、 基 于 文本 的 交互 式 软件 中 指示 操作 的 文字 、 文 章 

| 导语 等 。 

| 

| 回 i: 表示 不 同 于 其 他 文字 的 文字 ， 具 有 不 同 的 语 态 或 语气 ， 或 其 他 不 同 于 常规 之 处 ， 用 于 如 分 类 名 
称 、 技 术 术语 、 外 语 里 的 惯用 词 、 翻 译 的 散文 、 西 方 文字 中 的 船舶 名 称 等 。 

【示例 】 下 面 的 示例 简单 演示 了 b 和 i 应 用 场景 。 

<p> 这 是 一 个 <b> 红 </b> 盒子 , 那 是 一 个 <b> 蓝 <b> 盒子 。<jp> 

<p> 这 块 <i class="taxonomy"> 玛 玉 </> 来 自 西亚 。</p> 

<p> 这 篇 <i> 散文 <i> 已 经 发 表 。</p> 

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air</p> 


b 文本 默认 显示 为 粗 体 ，i 文本 默认 显示 为 斜体 ， 可 以 使 用 CSS 重 置 它们 的 样式 。 


Rw 


| 
| 
| 
| 
| 

| 这 提示 ;b 和 ji 不 包含 任何 明显 的 语义 ， 但 浏览 者 能 够 区 分 它们 与 周围 的 文字 。 在 传统 印刷 中 某 些 排版 夫 
则 在 现 有 的 HTML 语义 中 还 没有 对 应 的 语义 元 素 。 例 如 ， 以 斜体 表示 植物 学 名 、 具 体 的 交通 工具 
| 名 称 及 外 来 语 。 这 些 词语 不 是 为 了 强调 而 加 上 斜体 的 ， 只 是 排版 惯例 。 为 此 ，HTML5 启用 了 早 
| 被 废 齐 的 b 和 让 

| 

| 

| 

| 

| 

| 

| 

| 


4.2.4 定义 上 标 和 下 标 


在 传统 印刷 中 ， 上 标 和 下 标 是 很 重要 的 排版 格式 。HIML5 使 用 sup 和 sub 来 定义 上 标 文 本 和 下 标 文本 。 
上 标 和 下 标 文本 比 主体 文本 稍 高 或 稍 低 。 常 见 的 上 标 包括 商标 符号 、 指 数 和 脚注 编号 等 ; 常见 的 下 标 包括 化 
学 符号 等 。 

| 【示例 1】sup 元 素 的 一 种 用 法 就 是 表示 脚注 编号 。 根 据 从 属 关系 ， 将 脚注 放 在 article 的 footer 元 素 里 ， 
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而 不 是 整个 页 面 的 footer 元 素 里 。 


<article> 
<hl> 王 维 </hl> | 1 
<p> 王 维 参禅 悟 理 ， 学 庄 信道 ， 精 通 诗 、 书 、 画 、 音 乐 等 ， 以 诗 名 盛 于 开元 、 天 宝 间 ， 尤 长 五 言 ， 多 咏 山 水 
田园 ， 与 孟浩然 合 称 “ 王 乔 "， 有 “ 诗 佛 ”之 称 <a hre 仁 "#footnote-1" title=" 参考 注释 "><sup>[1]</sup> >” 
<h> 。 <p> 
<footer> 
<h2> 参考 资料 </h2> | 
<p id="footnote-1"><sup>[1]</sup> 孙 昌 武 《佛教 与 中 国文 学 ) 第 二 章 :“ 王 维 的 诗歌 受 佛教 影响 是 很 显著 的 。 
因此 早 在 生前 ， 就 得 到 “当代 诗 匠 ， 又 精 禅 理 ” 的 赞誉 。 后 来 ， 更 得 到 “ 诗 佛 ” 的 称号 。"</p> 


| 
| 
| 
| 
| 
</footer> | 
| 
| 
| 


</article> 


为 文章 中 每 个 脚注 编号 创建 了 链接 ， 指 向 footer 元 素 内 对 应 的 脚注 ， 从 而 让 访问 者 更 容易 找到 它们 。 
同时 ， 注 意 链接 中 的 title 属性 也 提供 了 一 些 提示 。 | 
上 标 是 对 某 些 外 语 缩写 词 进 行 格式 化 的 理想 方式 ， 例如， 法 语 中 用 Mlle 表示 Mademoiselle ( 小姐)，| 
西班牙 语 中 用 3 表示 tercera ( 第 三 )。 此 外 ， 一 些 数字 形式 也 要 用 到 上 标 ， 如 2s、5s。 下 标 适用 于 化 学 分 | 
子 式 ， 如 HO。 | 


党 提示 : sub 和 sup 元 素 会 轻微 地 增 大 行 高 。 不 过 使 用 CSS 可 以 修复 这 个 问题 。 修 复 样式 代码 如 下 。 
<style type="text/css"> 
sub, sup { 
font-size: 75%: 
line-height: 0: 
position: Telative: 
vertical-align: baseline: 
sup { top: -0.5em; } 
sub { bottom: -0.25em: } 
</style> 
用 户 还 可 以 根据 内 容 的 字号 对 上 述 样式 做 一 些 调整 ， 使 各 行 行 高 保持 一 致 。 


【示例 2】 对 于 下 面 的 数学 解 题 演示 的 段落 文本 ,使 用 格式 化 语义 结构 能 够 很 好 地 解决 数学 公式 中 各 种 | 
特殊 格式 的 要 求 。 对 于 机 器 来 说 ， 也 能 够 很 好 地 理解 它们 的 用 途 ， 效 果 如 图 4.1 所 示 。 | 


| 
<div id="maths"> | 
<hl> 解 一 元 二 次 方程 <hl> | 
<p> 一 元 二 次 方程 求解 有 四 种 方法 : </p> | 
<u> | 
<li> 直接 开平 方法 </li> | 

<li> 配方 法 </> | 

<li> 公式 法 </li> | 

<li> 分 解 因 式 法 </li> | 

</l> | 
<p> 例如 ， 针 对 下 面 这 个 一 元 二 次 方程 : </p> | 
<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p> | 
<p> 我 们 使 用 <big><b> 分 解 因 式 法 </b></big> 来 演示 解 题 思路 如 下 : </p> | 
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<p><small> 由 : </small>(<i>x</i>-1)(<i>x</i>-4)=0</p> 

<p><small> 得 : </small><br 亡 
<i>x</i><sub>1</sub>=1<br > 
<i>X</i><sub>2</sub>=4</p> 


</div> 


es * 
解 一 元 二 次 方程 
一 元 二 次 方程 宁 解 有 四 种 方 丢 : 

。 直 控 开 平方 法 

“配方 法 


本 
例如 ,针对 下 面 这 个 一 元 二 次 方程， 
st0 
拷 们 使 用 分 解 因 式 法 订 演 示 前 手电 路 如 下 。 


图 4.1 格式 化 文本 的 语义 结构 效果 


在 上 面 的 代码 中 ,使 用 i 元 素 定义 变量 x 以 斜体 显示 ; 使 用 sup 元 素 定义 二 元 一 次 方程 中 的 二 次 方 ; 使 


| 用 b 元 素 加 粗 显 示 常 量 值 ; 使 用 big 元 素 和 b 元素 加 大 加 粗 显 示 “ 分 解 因 式 法 ”这 个 短语 ; 使 用 small 元 素 


| 缩写 操作 谓词 “由 ”和 “得 ” 的 字体 大 小 ; 使 用 sub 元 素 定义 方程 的 两 个 解 的 下 标 。 
| 


4.2.5 定义 术语 


在 HIML 中 定义 术语 时 ,可 以 使 用 dfn 元 素 对 其 做 语义 上 的 区 分 。 例 如 : 
<p><dfn id="def-intemet">Intemet</dfn> 是 一 个 全 球 互联 网 络 系统 ， 使 用 因特网 协议 套件 (TCP/IP ) 为 全 球 数 十 


亿 用 户 提供 服务 。 
通常 ，dfn 元 素 默认 


</p> 


以 斜体 显示 。 由 df 标记 的 术语 与 其 定义 的 距离 远近 相当 重要 。 如 HTML5 规范 所 


述 :“ 如 果 一 个 段落 、 描 述 列表 或 区 块 是 某 dfh 元 素 距 离 最 近 的 祖先 ， 那么 该 段落 、 描 述 列表 或 区 块 必须 包 
含 该 术语 的 定义 。” 简 言 之 ，d 血 元 素 及 其 定义 必须 挨 在 一 起 ， 和 否则 便 是 错误 的 用 法 。 
【示例 】 可 以 在 描述 列表 ( dl 元 素 ) 中 使 用 dfn 元 素 。 


<p><dfn id="def-intemet">Intemet</dfn> 是 一 个 全 球 互联 网 络 系统 ,使 用 因特网 协议 套件 (TCP/IP ) 为 全 球 数 十 
亿 用 户 提供 服务 。</p> 


<d> 
<!-- 定义 “万 维 网 


"和 “因特网 "的 参考 定义 -> 


<dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt> 
<dd> 万 维 网 ( WWW ) 是 一 个 互 连 的 超 文本 文档 访问 系统 ， 它 建立 在 <a href="#def-internet">Internet</a> 之 上 。 


</dd> 
</d> 


仅 在 定义 术语 时 使 月 


| 字 变 为 斜体 。 


日 d 血 元 素 ， 而 不 能 为 了 让 文字 以 斜体 显示 就 使 用 该 元 素 。 使 用 CSS 可 以 将 任何 文 
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df 元 素 可 以 在 适当 的 情况 下 包 住 其 他 的 短语 元 素 ， 如 abbr。 例 如 : 
<p><dfn><abbr title="Junior">Jr.</abbr></dfm> 他 儿子 的 名 字 和 他 父亲 的 名 字 一 样 吗 ? </p> 


如 果 在 dfn 元 素 中 添加 可 选 的 title 属性 ， 其 值 应 与 df 术语 一 致 。 如 果 只 
abbr 元 素 ，dfn 本 身 没 有 文本 ， 那 么 可 选 的 title 只 能 出 现在 abbr 里 。 


4.2.6 标记 代码 


使 用 code 元 素 可 以 标记 代码 或 文件 名 。 如 果 代 码 中 包含 “<” 或 “>” 字 符 ， 应 使 用 &lt 和 &gt 表示 。 | 


如 果 直 接 使 用 “<” 或 “>” 字 符 ， 将 被 视 为 HTML 源 代 码 处 理 。 


【示例 】 本 例 使 用 code 显示 一 块 代码 ， 为 了 格式 化 显示 ， 这 里 同时 使 用 pre 元 素 包围 code 文本 。 


<pre> 

<code> 

codef{ 
margin:2em; 

} 

</code> 

</pre> 


【拓展 】 
除了 code 外 ， 其 他 与 计算 机 相关 的 元 素 简要 说 明 如 下 。 
回 kbd: 用 户 输入 指示 。 例 如 : 


<ol> 
<li> 使 用 <kbd>TAB</kbd> 键 ， 切 换 到 提交 按钮 </li> 


<li> 点 按 <kbd>RETURN</kbd> 或 <kbd>ENTER</kbd> 键 <Ni> 


</ol> 


与 code 一 样 ，kbd 默认 以 等 宽 字体 显示 。 
回 samp: 程序 或 系统 的 示例 输出 。 例 如 : 


<p> 一 旦 在 浏览 器 中 预览 ， 则 显示 <samp>Hello,World</samp></p> 


samp 默认 以 等 宽 字体 显示 。 
回 var: 变量 或 占 位 符 的 值 。 例 如 : 


<p> 爱 因 斯 坦 称 为 是 最 好 的 <var>E</var>=<var>m</var><var>c</var><stp>2</sup>.</p> 


var 也 可 以 作为 占 位 符 的 值 ， 例 如 ， 在 填词 游戏 的 答题 纸 上 可 以 这 样 定义 : <var>adjective</var>， 


<var>verb</var>。 


var 默认 以 斜体 显示 。 


注意 ， 可 以 在 HTMLS5 页 面 中 使 用 math 等 MathML 元 素 表示 高 级 的 数学 相关 的 标记 。 


4.2.7 ”预定 义 格式 


预定 义 文本 就 是 可 以 保持 文本 固有 的 换行 和 空格 。 使 
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pre 元 素 可 以 定义 预定 义 文本 。 


wy 
在 di 元 素 里 灌 套 一 个 单独 的 | 


Note 


| 7 css 各 则 ap 开发 从 入 站 双亲 和 ( 微 课 精 编 版 ) 
国王 志 


【示例 】 下 面 的 示例 使 用 pre 显示 CSS 样式 代码 ， 显 示 效 果 如 图 4.2 所 示 。 


<pre> 

pre{ 
margin: 20px auto: 
padding: 20px; 
background-color: #aea8a8;/* 根据 自己 需要 修改 背景 底 色 颜 色 */ 
white-space: pre-wrap: 
word-wrap: break-word: 
letter-spacing: 0; 
font: 14px/26px 'courier new'; 
position: relative; 

| border-radius: 4px: 

} 

</pre> 


| 预定 义 文本 默认 以 等 宽 字体 显示 ， 可 以 使 用 CSS 改变 字体 样式 。 如 果 要 显示 包含 HTML 元 素 的 内 容 ， 
| 应 将 包围 元 素 名 称 的 “<” 和 “>” 分 别 改 为 其 对 应 的 字符 实体 &lt 和 &gt:。 


x 


EECTREE nA 


图 4.2 定制 pre 预定 义 格式 效果 


pre 默认 为 块 显示 ， 即 从 新 一 行 开始 显示 ， 浏 览 器 通常 会 对 pre 文本 关闭 自动 换行 ， 因此， 如 果 包 含 很 
| 长 的 单词 ， 就 会 影响 页 面 的 布局 ， 或 产生 横向 滚动 条 。 使 用 下 面 的 CSS 样式 可 以 对 pre 包含 内 容 打开 自动 
| 换行 。 

pre { white-space: pre-wrap:} 


| < 所 注意 : 不 要 使 用 CSS 的 white-space:pre 代替 pre 的 效果 ， 这 样 会 破坏 预定 义 格 式 文本 的 语义 性 。 
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4.2.8 ”定义 缩写 词 


使 用 abbr 元 素 可 以 标记 缩写 词 并 解释 其 含义 ， 还 可 以 使 用 abbr 的 title 属性 提供 缩写 词 的 全 称 。 提 示 ， 
也 可 以 将 全 称 放 在 缩写 词 后 面 的 括号 里 ， 或 混用 这 两 种 方式 。 如 果 使 用 复数 形式 的 缩写 词 ， 全 称 也 要 使 
【示例 】 部 分 浏览 器 对 于 设置 了 title 的 abbr 文本 会 显示 为 下 面 虚线 样式 ， 如 果 看 不 到 ， 可 以 为 abbr 的 
包含 框 添加 line-height 样式 。 本 例 使 用 CSS 主要 设计 下 面 虚线 样式 ， 以 便 兼容 所 有 浏览 器 。 


| 
| 
<style> | 
abbr[title] { border-bottom: 1px dotted #000: } | 
</style> | 
<p><abbr title=" HyperText Markup Language">HTML</abbr> 是 一 门 标识 语言 。</p> | 

| 

| 


当 访 问 者 将 鼠标 移 至 abbr 上 ， 浏览 器 都 会 以 提示 框 的 形式 显示 title 文本 ， 类 似 于 a 的 title。 | 
abbr 使 用 场景 : 仅 在 缩写 词 第 一 次 在 视图 中 出 现时 使 用 。 使 用 括号 提供 缩写 词 的 全 称 是 解释 缩写 词 最 | 
直接 的 方式 ， 能 够 让 访问 者 更 直观 地 看 到 这 些 内 容 。 例 如 ， 使 用 智能 手机 和 平板 电脑 等 触摸 屏 设 备 的 用 | 
户 可 能 无 法 移 到 abbr 元 素 上 查看 title 的 提示 框 。 因 此 ， 如 果 要 提供 缩写 词 的 全 称 ， 应 该 尽量 将 它 放 在 括 
号 里 。 | 


| 
内 提示 : 在 HTML5 之 前 有 acronym ( 首 字母 缩写 词 ) 元 素 ， 但 设计 和 开发 人 员 常常 分 不 清楚 缩写 词 和 | 
首 字母 缩写 词 ， 因 此 HTML5 废除 了 acronym 元 素 ， 让 abbr 适用 于 所 有 的 场合 。 | 
| 
| 
| 


4.2.9 标注 编辑 或 不 用 文本 


HTML5 使 用 下 面 两 个 元 素来 标记 内 容 编 辑 的 操作 。 
回 ins: 已 添加 的 内 容 。 
回 del: 已 删除 的 内 容 。 
这 两 个 元 素 可 以 单独 使 用 ， 也 可 以 搭配 使 用 。 
【示例 1】 在 下 面 的 列表 中 ， 上 一 次 发 布 之 后 ， 又 增加 了 一 个 条 目 ， 同 时 根据 del 元 素 的 标注 ， 移 除了 
一 些 条 目 。 使 用 ins 元 素 的 时 候 不 一 定 要 使 用 del 元 素 ， 反 之 亦 然 。 浏 览 器 通常 会 让 它们 看 起 来 与 普通 文本 
不 一 样 。 同 时 ，s 元 素 用 于 标注 不 再 准确 或 不 再 相关 的 内 容 ( 一 般 不 用 于 标注 编辑 内 容 )。 
<Ul> 
<li><del> 删除 项 目 </del></li> 
<li> 列表 项 目 <4i> 
<li><del> 删除 项 目 </del></li> 
<li><ins> 插入 项 目 </ins></li> 
</ul> 


浏览 器 通常 对 已 删除 的 文本 加 上 删除 线 ， 对 插入 的 文本 加 上 下 画 线 。 可 以 用 CSS 修改 这 些 样式 。 
【示例 2】del 和 ins 是 少 有 的 既 可 以 包围 短语 内 容 ( 行内 元 素 )， 又 可 以 包围 块 级 内 容 的 元 素 。 

<ins> | 
<p> 文本 1</p> | 
</ins> | 
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<del> 
| <li><del> 删除 项 目 </del></l 放 
A | <li> 列表 项 目 <Ai> 
| <li><del> 删除 项 目 </del></li> 
<li><ins> 插入 项 目 </ins></li> 
</del> 


| 

| 

| del 和 ins 元 素 都 支持 两 个 属性 : cite 和 datetime。cite 属性 ( 区 别 于 cite 元 素 ) 用 于 提供 一 个 URL, 指 

| 向 说 明 编辑 原因 的 页 面 。 

| 【示例 3】 下面 的 示例 演示 了 del 和 ins 两 个 元 素 的 显示 效果 ， 如 图 4.3 所 示 。 

| 

| <p><cite> 因 为 懂 得 ， 所 以 慈悲 <cite>。<inscite="http://news.sanwen8.cn/a/2014-07-13/9518.html" 

| datetime="2018-8-1"> 这 是 张爱玲 对 胡 兰 成 说 的 话 </ins>。</p> 

<p> <cite> 笑 ， 全 世界 便 与 你 同 笑 ; 器 ， 你 便 独 自 哭 </cite>。<del datetime="2018-8-8"> 出 自 冰心 的 《 遥 寄 印度 哲 

人 泰 蕊 尔 》</del>，<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2018-8-1"> 出 自 张爱玲 
的 小 说 《 花 凋 》</ins> </p> 


3 全 
三 为 蘑 称 ， 记 以 潮 花 。 这 是 张爱玲 对 胡 兰 成 说 的 话 ， 


关公 妇 疮 仙人 且 半 : 舌 ， 你 俐 搬 尖 ,出 自杀 心 的 《 通 寄 印度 哲人 
来 长 尔 >， 出 自 张 受 夫 的 小 说 < 花 油 


图 4.3 插入 和 删除 信息 的 语义 结构 效果 


| datetime 属性 提供 编辑 的 时 间 。 浏 览 器 不 会 将 这 两 个 属性 的 值 显示 出 来 ， 因 此 它们 的 使 用 并 不 广泛 。 不 
| 过 ， 应 该 尽量 包含 它们 ， 从 而 为 内 容 提供 一 些 背景 信息 。 它 们 的 值 可 以 通过 JavaScript 或 分 析 页 面 的 程序 提 


| 次 提示 : HTML5 指出 : s 元 素 不 适用 于 指示 文档 的 编辑 ， 要 标记 文档 中 一 块 已 移 除 的 文本 ， 应 使 用 del 元 
| 素 。 有 时 ， 这 之 间 的 差异 是 很 微妙 的 ， 只 能 由 个 人 决定 哪 种 选择 更 符合 内 容 的 语义 。 仅 在 有 语义 
价值 的 时 候 使 用 del、ins 和 s 元素。 如 果 只 是 出 于 装饰 的 原因 要 给 文字 添加 下 画 线 或 删除 线 ， 可 
以 用 CSS 实现 这 些 效果 。 


4.2.10 指明 引用 或 参考 


使 用 cite 元 素 可 以 标识 引用 或 参考 的 对 象 ， 如 图 书 、 歌 曲 、 电 影 、 演 唱 会 或 音乐 会 、 规 范 、 报 纸 或 法 
| 律 文件 等 名 称 。 
| 【示例 】 在 下 面 的 示例 中 ， 使 用 cite 元 素 标记 图 书 名 称 。 


<p> 他 正在 看 <cite> 红楼 梦 </cite></p> 


”40 注意 : 要 引述 浙 中 内 容 ， 应 该 使 用 lockquote 或 q 元 素 ，cite 只 用 于 参考 源 本 身 ， 而 不 是 源 的 内 容 。 
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HTML4 允许 使 用 cite 引用 人 名 ，HTMLS 不 再 建议 使 用 。 例 如 ， 很 多 网 站 常用 cite 在 博客 或 文章 中 引 
作者 或 评论 者 的 名 字 。 

<p><cite> 鲁迅 </cite> 说 过 : <q> 地 上 本 没有 路 ， 走 的 人 多 了 就 成 了 路 。</q></p> | f 

了 cil 人- 


4.2.11 引述 文本 


blockquote 元 素 表示 单独 存在 的 引述 ( 通常 很 长 )， 它 默认 显示 在 新 的 一 行 。 而 q 元 素 则 用 于 短 的 引述 ， 
如 句子 里 面 的 引述 。 例 如 : 


| 

| 

| 

| 

| 

| 

<p> 毛泽东 说 过 : | 
<blockquote> 帝国 主义 都 是 纸老虎 .… </blockquote> | 

| 


</p> 
<p> 世界 自然 基金 会 的 目标 是 : <q cite="http://www.wwf.org"> 建设 一 个 与 自然 和 谐 相处 的 未 来 。</q> 我 们 希望 他 
们 成 功 。<jp> | 


| 
如 果 要 添加 署名 ， 署 名 应 该 放 在 blockquote 元 素 外 面 。 可 以 把 署名 放 在 P 元 素 里 面 ， 不 过 使 用 figure | 
和 figcaption 元 素 可 以 更 好 地 将 引述 文本 与 其 来 源 关联 起 来 。 如 果 blockquote 元 素 中 仅 包 含 一 个 单独 的 段落 | 
或 短语 ， 可 以 不 必 将 其 包 在 p 元 素 中 再 放 入 blockquote 元 素 。 | 
浏览 器 应 对 q 元 素 中 的 文本 自动 加 上 特定 语言 的 引号 ， 对 blockquote 元 素 文本 进行 缩 进 ，cite 元 素 属性 
的 值 则 不 会 显示 出 来 。 不 过 ， 所 有 的 浏览 器 都 支持 cite 元 素 ， 通 常 对 其 中 的 文本 以 斜体 显示 。 | 
【示例 】 下 面 这 个 结构 综合 展示 了 cite、q 和 blockquote 元 素 以 及 cite 引文 属性 的 用 法 ,演示 效果 如 | 
图 4.4 所 示 。 | 
<div id="article"> | 
<hl> 智慧 到 底 是 什么 呢 ? </hl> 
<h2>《 卖 拐 》 知 慧 摘 录 </h2> 
<blockquote cite="http://www.szbfnet/Article Show.asp?ArticleID=1249"> 
<p> 有 人 把 它 说 成 是 知识 ， 以 为 知识 越 多 ， 就 越 有 智慧 。 我 们 今天 无 时 无 处 不 在 受到 信息 的 包 轩 和 信息 | 
的 万 炸 ， 似 乎 所 有 的 信息 都 是 真理 ， 仿 佛 离 开 了 这 些 信息 ， 就 不 能 生存 下 去 了 。 但 是 你 掌握 的 信息 
越 多 ， 只 能 说 明 你 知识 的 丰富 ， 并 不 等 于 你 掌握 了 智慧 。 有 的 人 ,知识 丰富 ， 智 慧 不 足 ， 难 有 大 用 ; | 
有 的 人 ， 知 识 不 多 ， 但 却 无 所 不 能 ， 成 为 奇才 。</p> | 
</blockquote> 
<p> 下 面 让 我 们 看 看 <cite> 大 忽悠 </cite> 赵本山 的 这 段 台 词 ， 从 中 可 以 体会 到 语言 的 智慧 。</p> 
<div id="dialog"> 
<p> 赵本山 : <q> 对 头 ， 就 是 你 的 腿 有 病 ， 一 条 腿 短 ! </q></p> 
<p> 范 伟 : <q> 设 那个 事 儿 ! 我 要 一 条 腿 长 ， 一 条 腿 短 的 话 ， 那 卖 裤子 人 就 告诉 我 了 ! </q> </p> 
<p> 赵本山 : <q> 卖 裤子 的 告诉 你 你 还 买 裤子 么 ， 谁 像 我 心眼 这 么 好 哇 ? 这 老 余 ， 我 给 你 调调 。 信 不 信 ， 
你 的 腿 随 着 我 的 手 往 高 抬 ， 能 抬 多 高 抬 多 高 ， 往 下 使 劲 落 ， 好 不 好 ? 信 不 信 ? 腿 指定 有 病 ， 地 | 
短 ! 来 ,起 来 ! </q> </p> | 
<p class="action"> ( 范 伟 配合 做 动作 ) </p> 
<p> 赵本山 : <q> 停 ! 麻 没 ? </q> </p> 
<p> 范 伟 : <q> 麻 了 </q> </p> 
<p> 高 秀敏 : <q> 哎 ， 他 咋 麻 了 呢 ? </q> </p> 
<p> 赵本山 : <q> 你 踩 ， 你 也 麻 ! </q> </p> 
</div> 
</div> 
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Cae S http://ocalhosy mysite/testhtm! 
智慧 到 底 是 什么 呢 ? 
《 卖 拐 》 智 慧 摘 录 


有 人 把 它 说 成 是 知识 ， 以 为 知识 越 多 ， 这 如 和 有 各 本 :入 由 全 丰 相 合作 区 到 人 的 各 国 本 全 息 的 讼 诈 ， 似 乎 所 有 
的 信息 都 是 真理 ， 仿 佛 离 开 了 这 些 信息 , 但 是 你 掌握 的 信息 越 多 ， 明 你 知识 的 丰富 ， 并 不 
等 于 你 掌 担 了 智慧 。 有 的 人 ， 知 识 丰富 ， | 有 的 入， 知识 不 多 ， 人 成 为 奇才 。 

下 面 让 我 们 看 看 天 帮 弟 赵本山 的 这 段 台 词 ， 从 中 可 以 体会 到 语言 的 智慧 。 

赵本山 : “对头 ， 就 是 你 的 腿 有 有 病 ， 一 条 腿 短 ! ” 

范 伟 ,“ 没 那个 事 儿 ! 我 更 一 条 腿 长 ， 一 条 月 短 的 话 ， 那 卖 裤子 人 就 告诉 我 了 ! " 


赵本山 ,“ 卖 裤子 的 告诉 你 你 还 买 裤子 么 ， 谁 像 我 心 限 这 么 好 哇 ? 这 老 余 ， 我 给 你 凋 油 、 信 不 信 ， 你 的 腾 随 着 我 的 手 往 高 失 ， 能 
拍 多 高 抬 多 高 ， 往 下 使 秘 落 ， 好 不 好 ? 信 不 信 ? 腾 指 定 有 病 ， 右 腿 短 ! 来 ， 起来! ” 


《 范 伟 配合 做 动作 ) 

赵本山 ，" 停 ! 麻 没 ? " 
范 伟 ，" 麻 了 ” 

高 秀 性 ，" 哎 ， 他 昨 麻 了 呢 ? ” 
赵本山 ，“ 你 躁 ， 你 也 麻 ! ” 


” 崇 提示 : blockquote 和 q 元 素 都 有 一 个 可 选 的 cite 属性 ， 提 供 引述 内 容 来 源 的 URL。 该 属性 对 搜索 引擎 或 
| 其 他 收集 引述 文本 及 其 引用 的 脚本 来 说 是 有 用 的 。 默 认 cite 属性 值 不 会 显示 出 来 ， 如 果 要 让 访 
问 者 看 到 这 个 URL， 可 以 在 内 容 中 使 用 链接 (a 元 素 ) 重复 这 个 URL。 也 可 以 使 用 JavaScript 将 
cite 的 值 暴露 出 来 ， 但 这 样 做 的 效果 稍 差 一 

blockquote 和 q 元 素 可 以 谋 套 。 谋 套 的 q 元 素 应 该 自动 加 上 正确 的 引号 。 由 于 内 外 引号 在 不 同 语 
言 中 的 处 理 方式 不 一 样 ， 因 此 要 根据 需要 在 q 元 素 中 加 上 lang 属性 ， 不 过 浏览 器 对 谈 套 q 元 素 的 
支持 程度 并 不 相同 ， 其 实 浏览 器 对 非 谋 套 q 元 素 的 支持 也 不 同 。 


| 
| 
| 
| 
| 图 4.4 引用 信息 的 语义 结构 效果 
| 
| 


4 2.12 ”换行 显示 


| 使 用 br 元素 可 以 实现 文本 换行 显示 。 要 确保 使 用 br 元 素 是 最 后 的 选择 ， 因 为 该 元 素 将 表现 样式 带 入 了 
| HIML， 而 不 是 让 所 有 的 呈现 样式 都 交 由 CSS 控制 。 例 如 ， 不 要 使 用 br 元 素 模拟 段落 之 间 的 距离 。 相 反 ， 
| 应 该 用 P 相 标记 两 个 段落 并 通过 CSS 的 margin 属性 规定 两 段 之 间 的 距离 。 

| 【示例 】 对 于 诗歌 、 街 道 地 址 等 应 该 紧 挨 着 出 现 的 短 行 , 都 适合 用 br 元 素 。 
| <p> 北京 市 <br 人 > 

| 海淀 区 <br 亡 
| 


北京 大 学 <br /> 

32 号 楼 </p> 

每 个 br 元 素 强制 让 接 下 来 的 内 容 在 新 的 一 行 显示 。 如 果 没 有 br 元素， 整个 地 址 都 会 显示 在 同一 行 。 可 
| 以 使 用 CSS 控制 段落 中 的 行 间 距 以 及 段落 之 间 的 距离 。 


»*82* 


第 企 章 ”设计 移动 页 面 正 文 


yy 

4.2.13 ”修饰 文本 
| 
| 


span 是 没有 任何 语义 的 行内 元 素 ， 适 合 包 围 短语 、 流 动 对 象 等 内 容 ， 而 div 适合 包含 块 级 内 容 。 如 果 | 
希望 为 行内 对 象 应 用 下 面 项 目 ， 则 可 以 考虑 使 用 span 元 素 。 | 

回 HTML5 属性 ， 如 class、dir、id、lang、title 等 。 

回 CSS 样式 。 

回 JavaScript 脚本 。 

【示例 】 下 面 的 示例 使 用 span 元 素 为 行内 文本 “HTML” 应 用 CSS 样式 ,设计 其 显示 为 红色 。 

<style type="text/css"> 

‘Ted { color red: } 

</style> 

<p><span class="red">HTML</span> 是 通 向 WEB 技术 世界 的 钥匙 。</p> 


在 上 面 的 示例 中 ， 想 对 一 小 块 文字 指定 不 同 的 颜色 ， 但 从 句子 的 上 下 文 看 ， 没 有 一 个 语义 上 适合 的 | 
HTML 元 素 ， 因 此 额外 添加 了 span 元 素 ， 定 义 一 个 类 样式 。 | 
span 没有 语义 ， 也 没有 默认 格式 ， 用 户 可 以 使 用 CSS 添加 类 样式 。 可 以 对 一 个 span 元 素 同时 添加 


class 和 id 属性 ， 两 者 区 别 : class 用 于 一 组 元 素 ， 而 id 用 于 页 面 中 单独 的 、 唯 一 的 元 素 。 在 HTML5 中 , 没 | 
有 提供 合适 的 语义 化 元 素 时 ， 微 格式 经 常 使 用 span 为 内 容 添 加 语义 化 类 名 ， 以 填补 语义 上 的 空白 。 | 


4.2.14” 非 文本 注解 


在 HTML4 中 ,u 为 纯 样 式 元 素 ， 用 来 为 文本 添加 下 画 线 。 在 HTMLS5 中 ,nu 元 素 为 一 块 文字 添加 明显 | 
的 非 文本 注解 ， 如 在 中 文中 将 文本 标 为 专 有 名 词 ( 即 中 文 的 专 名 号 ， 用 于 表示 人 名 、 地 名 、 朝 代 名 等 专 名 )，| 
或 者 标明 文本 拼写 有 误 。 | 

【示例 】 下 面 的 示例 演示 了 的 应 用 。 

<p>When they <u class="spelling"> recieved</u> the package. they put it with <u class="spelling">there</u></p> 

class 是 可 选 的 ，u 文本 默认 仍 以 下 面 线 显 示 ， 通 过 title 属性 可 以 为 该 元 素 包含 的 内 容 添 加 注释 。 


只 有 当 cite、em、mark 等 其 他 语义 元 素 不 适用 的 情况 下 使 用 tu 元 素 。 同 时 ， 建 议 避 
以 免 与 同样 默认 添加 下 面 线 的 链接 文本 混淆 。 


4.3 特殊 文本 
HTML5 为 标识 特定 功能 的 信息 ， 新 增 很 多 文本 元 素 ， 具 体 说 明 如 下 。 


4.3.1 标记 高 亮 显示 


HTMLS 使 用 新 的 mark 元 素 实现 突出 显示 文本 。 可 以 使 用 CSS 对 mark 元 素 里 的 文字 应 用 样式 (不 应 | 
样式 也 可 以 ) 但 应 仅 在 合适 的 情况 下 使 用 该 元 素 。 无 论 何 时 使 用 matk 元 素 ， 它 总 是 用 于 提起 浏览 者 对 | 
特定 文本 的 注意 。 | 
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其 他 方法 实现 了 mark 元 素 的 功能 。 


| 

| 

| 

| 最 能 体现 mark 元 素 作 用 的 应 用 : 在 网 页 中 检索 某 个 关键 词 时 ， 呈 现 的 检索 结果 ， 现 在 许多 搜索 引擎 都 
| 【示例 1】 下 面 的 示例 使 用 mark 元 素 高 亮 显 示 对 HTMLS5 关键 词 的 搜索 结果 ， 演 示 效 果 如 图 4.5 所 示 。 

| 


| <article> 
| <h2><mark>HTML5</mark> 中 国 : 中 国 最 大 的 <mark>HTML5</mark> 中 文 门户 - Powered by Discuz! 官网 </h2> 
<p><mark>HTML5<hmark> 中 国 .是 中 国 最 大 的 <mark>HTML5<hmark> 中 文 门户 。 为 广大 <mark>html5</ 


示例 、<mark>html5</mark> 视频 、js 教程 等 多 种 <mark>html5</mark> 在 线 学 习 资 源 。</p> 
<p>www.html5cn.org/ - 百度 快照 - 86% 好 评 </p> 
</article> 


【示例 2】 下 面 的 示例 使 用 mark 元 素 将 唐诗 中 韵脚 特意 高 亮 显示 出 来 ， 效 果 如 图 4.6 所 示 。 


<article> 
<h2> 静夜 思 </h2> 
<h3> 李白 </h3> 
<p> 床 前 明月 <mark> 光 </mark>， 疑 是 地 上 <mark> 霜 </mark>。</p> 
<p> 举 头 望 明 月 ， 低 头 思 故 乡 <mark> 乡 </mark>。</p> 
</article> 


D locahosyiesti uml x Ne [DD localhost/test2ht x Wo 


二 > © [© locahosestl.himl 立 ] € 了 © [© ocanosytestz2htm 女 | } 


HIML5 中 国 :中 国 最 大 的 HTML5 中 文 门户 一 
Powered by Discuz! 官 网 


HIWL5 中 国 ,， 人 为 广大 html5 开 发 者 提供 
nl5 网 站 未 例 、html 5 视频、js 教 程 


html! 
等 多 种 h 和 床 前 明月 光 ， 疑 是 地 上 霜 。 
wm html5cn_ ore/ ~ 百度 快照 -864 地主 举 头 望 明 月 ， 低 头 思 故 多 。 


图 4.5 使 用 mark 元 素 高 亮 显示 关键 字 图 4.6 使 用 mark 元 素 高 亮 显示 韵脚 


个 元 素 的 作用 是 有 区 别 的 ， 不 能 混用 。 


mark> 开发 者 提供 <mark>html5</mark> 教程 、<mark>html5</mark> 开发 工具 、<mark>html5</mark> 网 站 


mark 元 素 还 可 以 用 于 标识 引用 原文 ， 为 了 某 种 特殊 目的 而 把 原文 作者 没有 重点 强调 的 内 容 标 示 出 来 。 


0 注意 : 在 HIML4 中 ， 用 户 习惯 使 用 em 或 strong 元 素来 突出 显示 文字 ， 但 是 mark 元 素 的 作用 与 这 两 


| mark 元 素 的 标示 目的 与 原文 作者 无 关 ， 或 者 说 它 不 是 被 原文 作者 用 来 标示 文字 的 ， 而 是 后 来 被 引用 时 


| 添加 上 去 的 ， 它 的 目的 是 吸引 当前 用 户 的 注意 力 ， 供 用 户 参 考 ， 希 望 能 够 对 用 户 有 帮助 。 而 strong 元 素 是 


原文 作者 用 来 强调 一 段 文字 的 重要 性 的 ， 如 错误 信息 等 ，em 元 素 是 作者 为 了 突出 文章 重点 文字 而 使 
| 这 提示 : 日前 ， 所 有 最 新 用 本 的 浏览 器 部 支持 matk 元 素 。IE8 以 及 更 平 的 版 本 不 支持 DIE 元素。 


| 4.3.2 ”标记 进度 信息 


的 。 


| progress 是 HTMLS5 的 新 元 素 ， 它 指示 某 项 任务 的 完成 进度 。 可 以 用 它 表 示 一 个 进度 条 ， 就 像 在 Web 
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| 


应 


| 

| 
中 看 到 的 指示 保存 或 加 载 大 量 数据 操作 进度 的 那 种 组 件 。 | 
支持 progress 元 素 的 浏览 器 会 根据 属性 值 自动 显示 一 个 进度 条 ， 并 根据 值 对 其 进行 着 色 。<progress> 和 

| 

| 


</progress> 之 间 的 文本 不 会 显示 出 来 。 例 如 : 

<p> 安装 进度 : <progress max="100" value="35">35%</progress></p> 

一 般 只 能 通过 JavaScript 动态 地 更 新 value 属性 值 和 元 素 里 面 的 文本 以 指示 任务 进程 。 通 过 | 

(或 直接 在 HIML 中 ) 将 value 属性 设 为 35 ( 假定 max="100" )。 

progress 元 素 支持 3 个 属性 : max 、value 和 form。 它们 都 是 可 选 的 ，max 属性 指定 任务 的 总 工作 量 , 其 | 
值 必 须 大 于 0。value 是 任务 已 完成 的 量 ， 值 必须 大 于 0、 小 于 或 等 于 max 属性 值 。 如 果 progress 没有 向 套 | 
在 form 元 素 里 面 ， 又 需要 将 它们 联系 起 来 ， 可 以 添加 form 属性 并 将 其 值 设 为 该 form 的 id。 | 

目前 ，Firefox 8+、Opera 11+、 正 10+、Chrome 6+、Safari 5.2+ 版 本 的 浏 览 器 都 以 不 同 的 表现 形式 对 | 


progress 元 素 提供 了 支持 。 | 
【示例 】 下 面 的 示例 简单 演示 了 如 何 使 用 progress 元 素 ， 演 示 效 果 如 图 4.7 所 示 。 | 
<section> 


| 
<p> 百分比 进度 : <progress id="progress" max="100"><span>0</span>%</progress></p> | 
<input type="button" onclick="click10”value=" 显示 进度 "/> | 
</section> | 
<script> | 
function click10{ 
Var progress = document.getElementById( “progress"): | 
progress.getElementsByTagName( “span')[0].textContent ="0": | 
for(var i=0;i<=100;it+) | 
updateProgress(2); | 
1 
function updateProgress(newValue){ 
Var progress = document.getElementById( “progress'): 
Progress.value = newValue; 
Progress.getElementsByTagName( “span')[0].textContent = newValue: 
} 


</script> 


€ 3 CC|©localhosttestihtim 人 | : 


百分比 进度 :IE 


图 4.7 使 用 progress 元 素 


< 全 注意 : progress 元 素 不 适合 用 来 表示 度量 衡 ， 例 如 ， 磁 盘 空间 使 用 情况 或 查询 结果 。 如 需 表 示 度 量 衡 ， 
应 使 用 meter 元 素 。 
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4.3.3 标记 刻度 信息 


| 
| 
A meter 也 是 HIMLS 的 新 元 素 ， 它 很 像 progress 元 素 。 可 以 用 meter 元 素 表示 分 数 的 值 或 已 知 范围 的 测 
| 量 结果 。 简 单 地 说 ， 它 代表 的 是 投票 结果 。 例 如 ， 已 售票 数 ( 共 850 张 , 已 售 811 张 ) 考试 分 数 (百分制 
ET 的 90 分 )、 磁 盘 使 用 量 ( 如 256 GB 中 的 74 GB ) 等 测量 数据 。 
| HIML5 建议 ( 并 非 强制 ) 浏览 器 在 呈现 meter 元 素 时 ， 在 旁边 显示 一 个 类 似 温度 计 的 图 形 ， 一 个 表示 
| 测量 值 的 横 条 ， 测 量 值 的 颜色 与 最 大 值 的 颜色 有 所 区 别 ( 相等 除外 )。 作 为 当前 少数 几 个 支持 meter 元 素 的 
| 浏览 器 ，Firefox 正 是 这 样 显示 的 。 对 于 不 支持 meter 元 素 的 浏览 器 , 可 以 通过 CSS 对 meter 元 素 添加 一 些 额 
| 外 的 样式 ， 或 用 JavaScript 进行 改进 。 
| 【示例 】 下 面 的 示例 简单 演示 了 如 何 使 用 meter 元 素 ， 演 示 效 果 如 图 4.8 所 示 。 
| 
| 
| 


<p> 项 目的 完成 状态 : <meter value="0.80">80% 完成 </meter></p> 
<p> 汽车 损耗 程度 : <meter low="0.25" high="0.75" optimum="0" value="0.21">21%</meter></p> 
<p> 十 公里 竞走 里 程 :<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p> 


| 

支持 meter 元 素 的 浏览 器 ( 如 Firefox ) 会 自动 显示 测量 值 ， 并 根据 属性 值 进行 着 色 。<meter> 和 
| </meter> 之 间 的 文字 不 会 显示 出 来 。 如 上 面 示例 中 的 最 后 一 个 p 元 素 所 示 ， 如 果 包 含 tile 文本 ,会 在 鼠标 
| 悬 停 在 横 条 上 时 显示 出 来 。 虽 然 并 非 必需 ， 但 最 好 在 meter 元 素 里 包含 一 些 反映 当前 测量 值 的 文本 ， 供 不 支 


| 持 meter 元 素 的 浏览 器 显示 。 
| 
| 
| 
| 
| 
图 4.8 刻度 值 
正 不 支持 meter 元 素 ， 它 会 将 meter 元 素 里 的 文本 内 容 显 示 出 来 ， 而 不 是 显示 一 个 彩色 的 横 条 。 可 以 
通过 CSS 改变 其 外 观 。 


| 

| 

| 

| 

| 

| 

| 

。 meter 元 素 不 提供 定义 好 的 单位 ， 但 可 以 使 用 tite 属性 指定 单位 ， 如 上 面 示例 中 的 最 后 一 个 P 元 素 所 

| 示 。 通 常 ， 浏 览 器 会 以 提示 框 的 形式 显示 tite 文本 。meter 元 素 并 不 用 于 标记 没有 范围 的 普通 测量 值 ， 如 高 

| 度 、 宽 度 、 距 离 、 周 长 等 。 

| meter 元 素 包含 7 个 属性 ， 简 单 说 明 如 下 。 

| 加 value: 在 元 素 中 特别 标示 出 来 的 实际 值 。 该 属性 值 默认 为 0， 可 以 为 该 属性 指定 一 个 浮 点 小 数值 。 

唯一 必须 包含 的 属性 。 

| 加 min: 设置 规定 范围 时 ， 允 许 使 用 的 最 小 值 ， 默 认为 0， 设 定 的 值 不 能 小 于 0。 

| 回 max: 设置 规定 范围 时 ， 人 允许 使 用 的 最 大 值 。 如 果 设 定时 ， 该 属性 值 小 于 min 属性 的 值 ， 那 么 把 

| min 属性 的 值 视 为 最 大 值 。max 属性 的 默认 值 为 1。 

回 low: 设置 范围 的 下 限 值 ， 必 须 小 于 或 等 于 high 属性 的 值 。 同 样 ， 如 果 low 属性 值 小 于 min 属性 的 

值 ， 那 么 把 min 属性 的 值 视 为 low 属性 的 值 。 

”名 “high: 设置 范围 的 上 限 值 。 如 果 该 属性 值 小 于 low 属性 的 值 ， 那 么 把 low 属性 的 值 视 为 high 属性 的 
值 ， 同 样 ， 如 果 该 属性 值 大 于 max 属性 的 值 ， 那 么 把 max 属性 的 值 视 为 high 属性 的 值 。 
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| 

| 

回 optimum: 设置 最 佳 值 ， 该 属性 值 必须 在 min 属性 值 与 max 属性 值 之 间 ， 可 以 大 于 ligh 属性 值 。 
回 formm: 设置 meter 元 素 所 属 的 一 个 或 多 个 表单 。 
| 

| 


人 


痊 提示: 目前 ，Safari 5.2+、Chrome 6+、Opera 11+、Firefox 16+ 版 本 的 浏览 器 支持 meter 元 素 。 浏 
览 器 对 meter 元 素 的 支持 情况 还 在 变化 ， 关 于 最 新 的 浏览 器 支持 情况 ， 参 见 http://caniuse. 
com/#feat—progressmeter, 

有 人 尝试 过 针对 支持 meter 元 素 的 浏览 器 和 不 支持 的 浏览 器 统一 编写 meter 元 素 的 CSS。 在 网 上 | 
搜索 “style HTML5 meter with CSS” 可 以 找到 一 些 解决 方案 ， 其 中 的 一 些 用 到 了 JavaScript。 | 


| 
4.3.4 标记 时 间 信 息 | 


使 用 time 元 素 标记 时 间 、 日 期 或 时 间 段 ，time 元 素 是 HTMLS5 新 增 的 元 素 。 呈 现 这 些 信息 的 方式 有 多 | 
种 。 例 如 : 


<p> 我 们 在 每 天 早上 <time>9:00</time> 开始 营业 。</p> 
<p> 我 在 <time datetime="2018-02-14"> 情人 节 </time> 有 个 约会 


time 元 素 最 简单 的 用 法 是 不 包含 datetime 属性 。 在 忽略 datetime 属性 的 情况 下 ， 它 的 确 提供 了 具备 有 | 
效 的 机 器 可 读 格式 的 时 间 和 日 期 。 如 果 提 供 了 datetime 属性 ，time 元 素 中 的 文本 可 以 不 严格 使 用 有 效 的 格 | | 
式 ; 如 果 忽略 datetime 属性 ， 文 本 内 容 就 必 和 日 期 或 时 间 格 式 。 | 

time 元 素 中 包含 的 文本 内 容 会 出 现在 屏幕 上 ， 对 用 户 可 见 ， 而 可 选 的 datetime 属性 则 是 为 机 器 准备 的 。 
该 属性 需要 遵循 特定 的 格式 。 浏 览 器 只 显示 time es 而 不 会 显示 datetime 的 值 。 | 

datetime 属性 不 会 单独 产生 任何 效果 ,但 可 以 用 于 在 Web 应 用 ( 如 日 历 应 用 ) 之 间 同 步 日 期 和 时 间 。 
这 就 是 必须 使 用 标准 的 机 器 可 读 格式 的 原因 ， 这 样 程序 之 间 就 可 以 使 用 相同 的 “语言 ”来 共享 信息 


迪 提示 : 不 能 在 time 元 素 中 谋 套 另 一 个 time 元 素 ， 也 不 能 在 没有 datetime 属性 的 time 元素 中 包含 其 他 元 
素 (只 能 包含 文本 )。 


在 早期 的 HTML5 说 明 中 ，time 元 素 可 以 包含 一 个 名 为 pubdate 的 可 选 属性 。 不 过 ， 后 来 pubdate 已 不 
再 是 HTMLS5 的 一 部 分 。 读 者 可 能 在 早期 的 HTMLS5 示例 中 遇 到 过 该 属性 。 

【拓展 】 

datetime 属性 ( 或 者 没有 datetime 属性 的 time 元 素 ) 必须 提供 特定 的 机 器 可 读 格式 的 日 期 和 时 间 。 
可 以 简化 为 下 面 的 形式 。 


YYYY-MM-DDThh:mm:ss 


例如 ( 当地 时 间 ): 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
2018-11-03T17:19:10 | 
| 


表示 “当地 时 间 2018 年 11 月 3 日 下 午 5 时 19 分 10 秒 "。 小 时 部 分 使 用 24 小 时 制 ， 因 此 表示 下 午 5 | 

点 应 使 用 17， 而 非 05。 如 果 包 含 时 间 ， 秘 是 可 选 的 。 也 可 以 使 用 hh:mmsss 格式 提供 时 间 的 毫秒 数 。 注 意 ，| 
毫秒 数 之 前 的 符号 是 一 个 点 。 | 
如 果 要 表示 时 间 段 ， 则 格式 稍 有 不 同 。 有 几 种 语法 ， 不 过 最 简单 的 形式 如 下 。 | 


nhnmns 
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i 
a 


Note 


| 例 


如 ， 
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其 中 ,3 个 n 分别 表 示 小 时 数 、 分 钟 数 和 秒 数 。 
也 可 以 将 日 期 和 时 间 表 示 为 世界 时 。 在 末尾 加 上 字母 Z， 就 成 了 UTC ( Coordinated Universal Time, 全 


| | 球 标准 时 间 ) UTC 是 主要 的 全 球 时 间 标 准 。 例 如 ( 使 用 UTC 的 世界 时 ): 


2018-11-03T17:19:10Z 

也 可 以 通过 相对 UTC 时 差 的 方式 表示 时 间 。 这 时 不 写字 母 Z, 写 上 一 ( 减 ) 或 + (加 ) 及 时 差 即 可 。 
含 相对 UTC 时 差 的 世界 时 。 

2018-11-03T17:19:10-03:30 


表示 “ 纽 芬兰 标准 时 (NST ) 2018 年 11 月 3 日 下 午 5 时 19 分 10 秒 ”( NST 比 UTC 晚 3 个 半 小 时 )。 


党 提示 : 如 果 确 实 要 包含 datetime， 不 必 提 供 时 间 的 完整 信息 。 


435 标记 联系 信息 


HTML 没有 专门 用 于 标记 通讯 地 址 的 元 素 ，address 元 素 是 用 于 定义 与 HTML 页 面 或 页 面 一 部 分 ( 如 


| 一 篇 报告 或 新 文章 ) 有 关 的 作者 、 相 关 人 士 或 组 织 的 联系 信息 ， 通 常 位 于 页 面 底部 或 相关 部 分 内 。 至 于 
address 元 素 具体 表示 的 是 哪 一 种 信息 ， 取 决 于 该 元 素 出 现 的 位 置 。 


E 者 的 通讯 地 址 ， 这 时 将 地 址 用 address 标记 就 是 有 效 的 。 但 是 用 address 标记 公司 网 站 “联系 我 们 ”页 面 


【示例 】 下 面 是 一 个 简单 的 联系 信息 演示 示例 。 


<main role="main"> 
<article> 
<hl> 文章 标题 <hl> 
<p> 文章 正文 </p> 
<footer> 
<p> 说 明文 本 </p> 
<address> 
<a href="mailto:zhangsan(@163.com">zhangsan(@163.com</a>. 
</address> 
</footer> 
</article> 
</main> 
<footer role="contentinfo"> 
<p><small>&copy: 2018 baidu, Inc.</small></p> 
<address> 
北京 8 号 <a href="index.html"> 首页 </a> 
</address> 
</footer> 


大 多 数 时 候 ， 联 系 信息 的 形式 是 作者 的 电子 邮件 地 址 或 指向 联系 信息 页 的 链接 。 联 系 信息 也 有 可 能 是 


办 公 地 点 ， 则 是 错误 的 用 法 。 
在 上 面 示例 中 ,页面 有 两 个 address 元 素 : 一 个 用 于 article es 另 一 个 位 于 页 面 级 的 footer 元 

， 用 于 整个 页 面 的 维护 者 。 注 意 article 的 address 元 素 只 包含 联系 信息 。 尽 管 article 的 footer 元 素 里 也 
关于 作者 的 背景 信 息 ， 但 这 些 信息 位 于 address 元 素 外 面 。 
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address 元 素 中 的 文字 默认 以 斜体 显示 。 如 果 address 嵌 套 在 article 元 素 里 ， 则 属于 其 所 在 的 最 近 的 


article 元 素 ; 否则 属于 页 面 的 body。 说 明 整 个 页 面 的 作者 的 联系 信息 时 ， 通 常 将 address 放 在 footer 元 素 里 .| | 

article 里 的 address 元 素 提供 的 是 该 article 作者 的 联系 信息 ， 而 不 是 嵌 套 在 该 article 里 的 其 他 任何 article ( 如 | 

户 评论 ) 的 作者 的 联系 信息 。 
address 元 素 只 能 包含 作者 的 联系 信息 ， 不 能 包括 其 他 内 容 ， 如 文档 或 文章 的 最 后 修改 时 间 。 此 外 ， 

HIML5 禁止 在 address 里 包含 以 下 元 素 : hl ~ h6、article 、address 、aside 、footer、header、hgroup 、nav 和 section 。 


4.3.6 标记 显示 方向 


如 果 在 HTML 页 面 中 混合 了 从 左 到 右 书写 的 字符 ( 如 大 多 数 语言 所 用 的 拉丁 字符 ) 和 从 右 到 左 书 三 的 | | 
字符 (如 阿拉 伯 语 或 希 伯 来 语 字符 )， 就 可 能 要 用 到 bdi 和 bdo 元 素 。 | 

要 使 用 bdo 元 素 ， 必 须 包含 ir 属性 ， 取 值 包 括 二 ( 由 左 至 右 ) 或 叫 (由 右 至 左 )， 指 定 希望 旦 现 的 显 | | 
示 方 向 。 

bdo 元 素 适 用 于 段落 里 的 短语 或 句子 ， 不 能 用 它 包含 多 个 段落 。bdi 元 素 是 HTMLS 中 新 加 的 元 素 ， 用 | 
于 内 容 的 方向 未 知 的 情况 ， 不 必 包 含 dir 属性 ， 因 为 默认 已 设 为 自动 判断 。 

【示例 】 下 面 的 示例 设置 用 户 名 根据 语言 不 同 自动 调整 显示 顺序 。 


| 

| 

<ul> | 
<li><bdi>jcranmer</bdi></li> | 
| 

| 

| 

| 


<li><bdi>hober</bdi></li> 
<li><bdi> </bdi></l> 
</ul> 


目前 ， 只 有 Firefox 和 Chrome 浏览 器 支持 bdi 元 素 。 


4.3.7 标记 换行 断 点 


HTML5 为 br 元 素 引 入 了 一 个 相近 的 元 素 : wbr。 它 代表 “一 个 可 换行 处 ”。 可 以 在 一 个 较 长 的 无 间断 | 
短语 (如 URL ) 中 使 用 该 元 素 ， 表 示 此 处 可 以 在 必要 的 时 候 进行 换行 ， 从 而 让 文本 在 有 限 的 空 间 内 更 具 可 | 
读 性 。 因 此 ， 与 br 元 素 不 同 ，wbr 元 素 不 会 强制 换行 ， 而 是 让 浏览 器 知道 哪里 可 以 根据 需要 进行 换行 。 

【了 示例】 下面 的 示例 为 URL 字符 串 添加 wbr 元 素 ， 这 样 当 窗口 宽度 变化 时 ， 浏览 器 会 自动 根据 断 点 确 
定 换行 位 置 ， 效 果 如 图 4.9 所 示 。 

<p> 本 站 旧地 址 为 : https:<wbr>//<wbr>www.old_site.com/， 新 地 址 为 : https:<wbr>//<wbr>www.new_site.com/。</p> 


Oo-e /em -sc[eeats | 


本 站 | 旧地 址 为 ，https-//orwrw old_site com/， 新 地址 为 
https://wwwnew, site.com/, 


< > © [© localhost/testlhtml 女 ] : 


本 站 旧地 址 为 ，https: A old_site. com/， 新 地 址 为 ，https: 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 

Arq new_site. comf， 

| 

| 

| 


正 中 换行 断 点 无 效 Chrome 中 换行 断 点 有 效 | 
图 4.9 定义 换行 断 点 . 
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| 
| 劳 注 标 记 是 东亚 语言 ( 如 中 文 和 日 文 ) 中 一 种 惯用 符号 ， 通 常用 于 表示 生僻 字 的 发 音 。 这 些小 的 注解 


全 -| 字符 出 现在 它们 标注 的 字符 的 上 方 或 右 方 。 它 们 常 简称 为 旁 注 (muby 或 rubi )。 日 语 中 的 旁 注 字符 称 为 振 


假名 。 
| ruby 元 素 以 及 它 的 子 元 素 t 和 十 是 HTML5 中 为 内 容 添加 旁 注 标记 的 机 制 。 It 元 素 指明 对 基准 字符 进 
| 行 注解 的 旁 注 字符 。 可 选 的 二 元 素 用 于 在 不 支持 ruby 元 素 的 浏览 器 中 的 旁 注 文本 周围 显示 括号 。 

| 【示例 】 下 面 的 示例 演示 了 如 何 使 用 mby 和 tt 元 素 为 词语 旁 注 ， 效 果 如 图 4.10 所 示 。 

<ruby> 

北 <mp>(</rp><rt> 夕 仆 "</rt><mp>)</mp> 


京 <p>(</mp><rt> 4 | 人 </rt><rp>)</p> 
</ruby> 


| 可 以 看 到 在 不 支持 ruby 元 素 的 浏览 器 中 括号 的 重要 性 。 没 有 它们 ， 基 准 字 符 和 劳 注 文 本 就 会 显示 在 一 
| 起 ， 让 内 容 变 得 混乱 。 


上 

| 

| 

| x 
| 

| HIS 
| 

| SE 

| 

| 

| 

| 


北京 


图 4.10 旁 注 标记 
支持 劳 注 标记 的 浏览 器 会 将 旁 注 文本 显示 在 基准 字符 的 上 方 ( 也 可 能 在 旁边 )， 不 显示 括号 。 不 支持 旁 
注 标记 的 浏览 器 会 将 旁 注 文本 显示 在 括号 里 ， 就 像 普 通 的 文本 一 样 。 
目前 ，I 9+、Firefox 、Opera 、Chrome 和 Safari 都 支持 mby、rt 和 1 了 p 元素 。 


回 回 
| 六 


4.4 HTML5 全 局 属性 
频 讲解 

HTML5 除了 支持 HIML4 原 有 的 全 局 属性 之 外 ， 还 添加 了 8 个 新 的 全 局 属性 。 所 谓 全 局 属性 是 指 可 以 
于 任何 HTML 元 素 的 属性 。 


4.4.1 可 编辑 内 容 


contenteditable 属性 的 主要 功能 是 允许 用 户 可 以 在 线 编辑 元 素 中 的 内 容 。contenteditable 是 一 个 布尔 值 
| 属性 ， 可 以 指定 为 tue 或 false。 

| 注意 ， 该 属性 还 有 个 隐藏 的 inherit ( 继承 ) 状态 ， 属 性 为 tue 时 ， 元 素 被 指定 为 允许 编辑 ; 属性 为 
| false 时 ， 元 素 被 指定 为 不 允许 编辑 ; 未 指定 true 或 false 时 ， 则 由 inherit 状态 来 决定 ， 如 果 元 素 的 父 元 素 是 
| 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 的 。 
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【示例 】 在 下 面 的 示例 中 为 正文 文本 包含 框 <div> 标签 加 上 contenteditable 属性 后 ， 该 包含 框 包含 的 文 

本 就 变 成 可 编辑 的 了 ， 浏 览 者 可 自行 在 浏览 器 中 修改 内 容 ， 执 行 结果 如 图 4.11 所 示 。 
<div contenteditable= "true"> 
<p> 旧 有 全 局 属性 : id、class、style、title、accesskey、tabindex、lang、dir</p> 


<p> 新 增 全 局 属性 : contenteditable 、contextmenu 、data-* 、draggable 、dropzone 、hidden 、spellcheck 、translate</p> | 
iv> 


x 用 四 
€ 3 GC |© Iocalhost8080/mysite/te… 全 | ; € 3 GC |© localhost8080/mysite/te... 从 | : 


上 昌 有 全 局 属性 : id、class、style、title、 谣 增 全 局 属性 : contenteditable、 
accesskey、 tabindex、 lang、 dir ontextmenu、data-*、draggable、 


| 
| 
| 
| 
[localhosta080/mysite/ x We | 
| 
| 
| 
| 
| 


新 增 全 局 属性 : contenteditable、 
contextmenu、data-*、draggable、 
dropzone、hidden、spellcheck、translate 


| 
原始 列表 编辑 列表 项 项 目 | 
图 4.11 可 编辑 文本 | 
| 
在 编辑 完 元 素 中 的 内 容 后 ， 如 果 想 要 保存 其 中 内 容 ， 只 能 使 用 JavaScript 脚本 把 该 元 素 的 innerHTML | 

发 送 到 服务 器 端 进 行 保存 ， 因 为 改变 元 素 内 容 后 该 元 素 的 innerHTML 内 容 也 会 随 之 改变 ， 目 前 还 没有 特别 | 
的 API 来 保存 编辑 后 元 素 中 的 内 容 。 


洲 提示 : 在 JavaSeript 脚本 中 ， 元 素 还 具有 一 个 jsContentEditable 属性 ， 当 元 素 可 编辑 时 ， 该 属性 值 为 fue; 
当 元 素 不 可 编辑 时 ， 该 属性 值 为 false。 利 用 这 个 属性 ， 可 以 实现 对 编辑 数据 的 后 期 操作 。 


4.4.2 快捷 菜单 


contextmenu 属性 用 于 定义 元 素 的 上 下 文 菜单 。 所 谓 上 下 文 菜单 ， 就 是 会 在 用 户 右键 单 击 元 素 时 出 现 。 
【示例 】 下 面 的 示例 是 使 用 contextmenu 属性 定义 div 元 素 的 上 下 文 菜单 ， 其 中 contextmenu 属性 的 值 是 | 
要 打开 的 menu 元 素 的 id 属性 值 。 
<div contextmenu="mymenu"> 上 下 文 菜单 
<menu type="context" id="mymenu"> 
<menuitem label=" 微 信 分 享 "></menuitem> 
<menuitem label=" 微 博 分 享 "></menuitem> 
</menu> 
</div> 


当 用 户 右键 单 击 元 素 时 ,会 弹出 一 个 上 下 文 菜单 ， 从 中 可 以 选择 指定 的 快捷 菜单 项 目 ， 如 图 4.12 | 
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愉 本 -Ge | » 三 


Note | 


图 4.12 打开 上 下 文 菜单 


sy, 


| 小 提示; 有 前 又 有 lelox 坟 竺 contexinend 属 证。 


44. 3 自 定义 属性 


使 用 data-* 属性 可 以 自 定义 用 户 数据 。 具 体 应 用 包括 如 下 两 点 。 
回 data-* 属性 用 于 存储 页 面 或 元 素 的 私有 数据 
回 data-* 属性 赋予 所 有 HTML 元 素 典 入 自 定 义 属性 的 能 力 。 
存储 的 自 定义 数据 能 够 被 页 面 的 JavaScript 脚本 利用 ， 以 创建 更 好 的 用 户 体验 ， 方便 Ajax 调用 或 服务 
| 器 站 数据 库 查 询 - 
data-* 属性 包括 以 下 两 部 分 。 
回 属性 名 : 不 应 该 包含 任何 大 写字 母 ， 并 且 在 前 级 "data-" 之 后 必须 有 至 少 一 个 字符 。 
回 ”属性 值 : 可 以 是 任意 字符 串 。 
当 浏 览 器 解析 时 ， 会 忽略 前 级 "data-"， 取 用 其 后 的 自 定义 属性 。 
【示例 1】 下 面 的 示例 是 使 用 data-* 属性 为 每 个 列表 项 目 定义 一 个 自 定义 属性 type。 这 样 在 JavaScript 
旭 本 中 可 以 判断 每 个 列表 项 目 包 含 信息 的 类 型 。 
<u> 
<li data-animal-type="bird"> 猫头鹰 </li> 
<li data-animal-type="fish"> 鲫鱼 </li> 
<li data-animal-type="spider"> 蜂 蛛 </li> 


</ul> 

【示例 2】 以 上 面 的 示例 为 基础 ， 下 面 的 示例 是 使 用 JavaScript 脚本 访问 每 个 列表 项 目的 type 属性 值 ， 
| | 演示 效果 如 图 4.13 所 示 。 
| <u> 


| <li data-animal-type="bird"> 猫头鹰 </li> 
| <li data-animal-type="fish"> 鲤鱼 </li> 
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<li data-animal-type="spider"> 蜂 蛛 </li> 


<n> 
<script> 


var lis = document.getElementsByTagName( “li"): 
for(var i=0: i<lis.length: i++){ 
console.log(lis[i].dataset.animalType): 


} 
</script> 


[c 灶 "1| Hements Console Sources Network Timeline Profles » 
四 时 tp v Presevelog 


bird 

fish 

spider 
> 


访问 规则 与 CSS 脚本 化 访问 相同 。 对 于 复合 属性 名 ， 通 过 驼峰 命名 法 访问 ， 如 animal-type， 访 问 时 使 用 


animalType， 避 免 连 字符 在 脚 


§ Console | 


本 中 引发 的 歧义 。 


注意 ,目前 正 暂 不 支持 这 种 访问 方式 。 


4.4.4 定义 可 拖 动 操作 


draggable 属性 可 以 定义 元 素 是 否 可 以 被 拖 动 。 属 性 取 值 说 明 如 下 。 

回 tme: 定义 元 素 可 拖 动 。 

回 false: 定义 元 素 不 可 拖 动 。 

回 auto: 定义 使 用 浏览 器 的 默认 行为 。 

draggable 属性 常用 在 拖 放 操作 中 ,详细 说 明 请 参考 后 面 章节 的 “ 拖 放 APT 。 


4.4.5” 拖 动 数 据 


dropzone 属性 定义 在 元 素 上 拖 动 数 据 时 ， 是 否 复制 、 移 动 或 链接 被 拖 动 数 据 。 属 性 取 值 说 明 如 下 。 
回 copy: 拖 动 数据 会 产生 被 拖 动 数据 的 副本 。 
回 move: 拖 动 数 据 会 导致 被 拖 动 数 据 被 移动 到 新 位 置 。 


加 link: 拖 动 数据 会 产 4 


上 指向 原始 数据 的 链接 。 
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例如 : 
<div dropzone="copy"></div> 


提示 : 目前 所 有 主流 浏览 器 都 不 支持 dropzone 属性 。 


在 HTML5 中 ， 所 有 元 素 都 包含 一 个 hidden 属性 。 该 属性 设置 元 素 的 可 见 状态 ， 取 值 为 一 个 布尔 值 ， 


当 设 为 true 时 ， 元 素 处 于 不 可 见 状态 ; 当 设 为 false 时 ， 元 素 处 于 可 见 状 态 。 


【示例 】 下 面 使 用 hidden 属性 定义 段落 文本 隐藏 显示 。 
<p hidden><img src="images/1.jpg" width="200" /></p> 


hidden 属性 可 用 于 防止 用 户 查 看 元 素 ， 直 到 匹配 某 些 条件 ， 如 选择 了 某 个 复 选 框 。 然 后 ， 在 页 面 加 载 
， 可 以 使 用 JavaScript 脚本 删除 该 属性 ， 删 除 之 后 该 元 素 变 为 可 见 状态 ， 同 时 元 素 中 的 内 容 也 即时 显示 


六 提示 : 除了 正 ， 所 有 主流 浏览 器 都 支持 hidden 属性 。 


4.4.7 语法 检查 


spellcheck 属性 定义 是 否 对 元 素 进 行 拼写 和 语法 检查 。 可 以 对 以 下 内 容 进行 拼写 检查 。 

回 input 元素 中 的 文本 值 ( 非 密码 )。 

回 textarea 元 素 中 的 文本 。 

回 可 编辑 元 素 中 的 文本 。 

spellcheck 属性 是 一 个 布尔 值 的 属性 ， 取 值 包括 tue 和 false， 为 true 时 表示 对 元 素 进行 拼写 和 语法 检 


FE， 为 false 时 则 不 检查 元 素 。 用 法 如 下 。 


<!-- 以 下 两 种 书写 方法 正确 -> 
<textarea spellcheck="true" > 
<input type=text spellcheck=false> 
<!-- 以 下 书写 方法 错误 -> 
<textarea spellcheck > 


注意 ， 如 果 元 素 的 readonly 属性 或 disabled 属性 设 为 tue， 则 不 执行 拼写 检查 。 
【示例 】 下 面 的 示例 设计 两 段 文 本 ， 第 一 段 文本 可 编辑 、 可 语法 检查 ; 第 二 段 文 本 可 编辑 ， 但 不 允许 语 


| 法 检查 。 当 编辑 文本 时 ， 第 一 段 文本 显示 检查 状态 ， 而 第 二 段 忽略 ,效果 如 图 4.14 所 示 。 


<div contenteditable= "true"> 
<p spellcheck="tme"> 旧 有 全 局 属性 : id、class、style 、title 、accesskey 、tabindex 、lang 、dir</p> 
<p spellcheck="false"> 新 增 全 局 属性 : contenteditable、contextmenu 、data-* 、draggable 、dropzone 、hidden 、 
spellcheck 、translate</p> 
</div> 
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€ 3 CC |© Ilocalhost8080/mysite/testlLhtml 会 | : 


labindex、lang、dir 


增 全 局 属性 : contenteditable、contextmenu、 
lata-*、draggable、 dmpfone、 hidden、 
lcheck、translate 


日 有 全 局 属性 : id、class、style、title、accesskey、 | 


图 4.14 段落 文本 检查 状态 比较 


4.4.8 翻译 内 容 


translate 属性 定义 是 否 应 该 翻译 元 素 内 容 。 取 值 说 明 如 下 。 
回 yes: 定义 应 该 翻译 元 素 内 容 。 

回 no: 定义 不 应 翻译 元 素 内 容 。 

【示例 】 下 面 的 示例 演示 了 如 何 使 用 translate 属性 。 


<p translate="no"> 请 勿 翻译 本 段 。</p> 
<p> 本 段 可 被 译 为 任意 语言 。</p> 


党 提示 : 目前 ， 所 有 主流 浏览 器 都 无 法 正确 地 支持 translate 属性 。 


4.5 在 线 练 习 
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美化 页 面 文本 


( 铭 " 视频 讲解 : 2 小 时 6 分 钟 ) 


CSS3 优化 并 增强 了 CSS 2.1 的 字体 和 文本 属性 ， 使 网 页 文字 更 具 表 现 力 和 感染 力 ， 
丰富 了 网 页 文本 的 样式 和 版 式 。 用 户 可 以 使 用 网 络 字 体 定义 将 殊 的 字体 类 型 ， 摆 脱 浏 览 
器 所 在 系统 字体 的 局 限 ; 可 以 选择 更 多 的 色彩 模式 ， 创 建 灵 活 的 网 页 配色 体系 ; 通过 文 
本 阴影 ， 让 字体 看 起 来 更 美 现 ; 通过 动态 内 容 ， 让 网 页 内 容 不 再 单一 ，CSS 控制 网 页 内 
容 的 显示 能 力 更 强 。 


【学 习 重 点 】 

能够 设 计 字 体 和 文本 的 基本 样式 。 
WI 正确 处 理 文本 溢出 和 换行 问题 。 
P| 能 够 使 用 CSS3 新 色彩 模式 。 

了 灵活 定义 文本 阴影 样式 。 

了 灵活 添加 动态 内 容 。 

WI 正确 使 用 网 络 字体 。 
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5.1 设计 字体 样式 


国 癌 | 
视频 讲解 | 


字体 样式 包括 字体 类 型 、 大 小 、 颜 色 、 粗 细 、 下 画 线 、 斜 体 、 大 小 写 等 。 下 面 分 别 进行 介绍 。 


5.1.1 定义 字体 类 型 
使 用 font-family 属性 可 以 定义 字体 类 型 ， 用 法 如 下 。 
font-family : name 


name 表示 字体 名 称 ， 可 以 设置 字体 列表 ， 多 个 字体 按 优先 顺序 排列 ， 以 逗号 隔 开 。 


如 果 字 体 名 称 包含 空格 ， 则 应 使 用 引号 括 起 。 第 二 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 ， 如 果 使 用 


fantasy 序列 ， 将 提供 默认 字体 序列 。 


【示例 】 新 建 HIMLS 文档 ， 保 存 为 testlhtml， 在 <body> 标签 内 输入 如 下 两 行 段落 文本 代码 。 


<p> 月 落 乌 啼 霜 满 天 ， 江 枫 渔 火 对 愁 眠 。 </p> 
<p> 姑 苏 城 外 寒山 村 ， 夜 半 钟 声 到 客船 。</p> 


在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定义 一 个 内 部 样式 表 ， 然 后 输入 下 面 的 样式 代码 ， | 
用 来 定义 网 页 字体 的 类 型 。 | 
Pp {人 段落 样式 */ 
font-family:“ 隶 书 "; 刻录 书 字 体 */ 
1 


在 浏览 器 中 预览 效果 如 图 5.1 所 示 。 


7 本 ji 攻 人 ntpyiocalhosestl ~ BO 


月 落 乌 啼 箱 满 天 ， 江 板 光 火 对 受 惟 。 


姑 苏 城 外 察 山寺， 夜半 钟 疡 到 客船 。 


图 5.1 设计 隶书 字体 效果 


5.1.2 ”定义 字体 大 小 


使 用 CSS3 的 font-size 属性 可 以 定义 字体 大 小 ， 用 法 如 下 。 
font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length 


其 中 ，xx-small ( 最 小 )、x-small ( 较 小 )、small ( 小 )、medium ( 正常 )、large ( 大 )、 


9g7* 


| 
x-large ( 较 大 )、| 


| oD [7pss 各色 Wet 开发 从 入 门 到 茜 胡 ( 航 神 亲信 上) 
| 区 
| 
oclarge (最 大 ) 表示 绝对 字体 尺寸， 这 此 特殊 人 并 根据 对 象 字 休 进行 调整。 
| larger ( 增 大 ) 和 smaller ( 减 小 ) 这 对 特殊 值 能 够 根据 父 对 象 中 字体 尺寸 进行 相对 增 大 或 者 缩小 处 理 ， 
A | 使 用 成 比例 的 em 单位 进行 计算 。 
国 -j length 可 以 是 百分数 ， 或 者 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 但 不 可 为 负 值 。 其 百分比 取 值 是 基于 
9 父 对 象 中 字体 的 尺寸 来 计算 ， 与 em 单位 计算 相同 。 

【和 示例】 下 面 的 示例 演示 了 如 何 为 网 页 定义 字体 大 小 。 
| 首先 ， 新 建 HIML5 文档 ,保存 为 test.html， 在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定义 
| 一 个 内 部 样式 表 。 
| 
| 


| 然后 ， 输 入 下 面 的 样式 代码 ， 分 别 设置 网 页 字体 默认 大 小 ， 段 落 文本 字体 大 小 ， 以 及 <div> 标签 中 的 
| 字体 大 小 。 
| body {font-size:12px:} 让 以 像素 为 单位 设置 字体 大 小 */ 
| Pp {font-size:0.75em:} 谨 以 父 对 象 字体 大 小 为 参考 设置 大 小 */ 
div {font:9pt Arial, Helvetica, sans-serif:} 谨 以 点 为 单位 设置 字体 大 小 */ 


| 使 用 CSS3 的 color 属性 可 以 定义 字体 颜色 ， 用 法 如 下 。 

| 

| color : color 

| 

参数 color 表示 颜色 值 ， 取 值 包括 颜色 名 、 十 六 进 制 值 `.RGB 等 颜色 函数 ， 详 细 说 明 请 参考 CSS3 参考 手册 。 


【示例 】 下 面 的 示例 演示 了 在 文档 中 定义 字体 颜色 。 
首先 ， 新建 HTML5 文档 ,保存 为 test.html， 在 <head> 标签 内 添加 <style type="text/ess"> 标签 ， 定 义 


| 一 个 内 部 样式 表 。 

| 然后 ， 输入 下 面 的 样式 代码 ， 分 别 定义 页 面 、 段 落 文本 、<div> 标签 、<span> 标签 包含 的 字体 颜色 。 
body { color:gray:} 启 使 用 颜色 名 */ 
div { color:rgb(120,120,120):} 上 # 使 用 RGB */ 
span { color:reb(50%.50%,50%):} 证 使 用 RGB */ 


| 
| 
| 
| 
| Pp {color:#666666;} 上 # 使 用 十 六 进 制 */ 
| 
| 
| 
| 
| 
| 
| 


5.1.4 定义 字体 粗细 


| 使 用 CSS3 的 font-weight 属性 可 以 定义 字体 粗细 ， 用 法 如 下 。 

| font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
| 

| 

| 


”其 中 ，normal 为 默认 值 ， 表 示 正 常 的 字体 ， 相 当 于 取 值 为 400。bold 表示 粗 体 ， 相 当 于 取 值 为 700， 或 
| 者 使 用 b 元 素 定义 的 字体 效果 。 

| bolder ( 较 粗 ) 和 lighter ( 较 细 ) 相对 于 normal 字体 粗细 而 言 。 

| 另外 也 可 以 设置 值 为 100、200、300、400、500、600、700、800、900， 它们 分 别 表示 字体 的 粗细 ， 是 
| 对 字体 粗细 的 一 种 量化 方式 ， 值 越 大 就 表示 越 粗 ， 相 反 就 表示 越 细 。 
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【示例 】 新 建 HTMLS5 文档 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 的 样式 代码 ， 分 别 定义 段落 文本 、 一 | 

级 标题 、<div> 标签 包含 字体 的 粗细 效果 ， 同 时 定义 一 个 粗 体 样 式 类 。 
Pp {font-weight: normal } 上 证 等 于 400*/ | 
hl { font-weight: 700 } 片 等 于 bold */ | 
div{ font-weight: bolder } 访 可 能 为 500 */ | 
.bold {font-weight:bold:} 店 粗 体 样式 类 */ 


注意 ,设置 字体 粗细 也 可 以 称 为 定义 字体 的 重量 。 对 于 中 文 网 页 设计 来 说 ,一 般 仅 用 到 bold (加 粗 )、| 
normal ( 普通 ) 两 个 属性 值 。 


5.1.5 定义 艺术 字体 


使 用 CSS3 的 font-style 属性 可 以 定义 字体 倾斜 效果 ， 用 法 如 下 。 
font-style : normal | italic | oblique 
其 中 ，normal 为 默认 值 ， 表 示 正 常 的 字体 ，italic 表示 斜体 ，oblique 表示 倾斜 的 字体 。italic 和 oblique | 

两 个 取 值 只 能 在 英文 等 西方 文字 中 有 效 。 | 
【示例 】 新 建 test.html 文档 ， 输 入 下 面 的 样式 代码 ， 定 义 一 个 斜体 样式 类 。 | 
| 

| 

| 


.italic {l* 斜体 样式 类 */ 
font-style:italic; 
} 


在 <body> 标签 中 输入 以 下 两 行 段落 文本 代码 ， 并 把 斜体 样式 类 应 用 到 其 中 一 段 文本 中 。 


<p> 知 我 者 ， 谓 我 心 忧 ， 不 知 我 者 ， 谓 我 何 求 。 </p> 
<p class="italic"> 君子 坦荡 荡 ， 小 人 长 戚 成 。</p> 


最 后 ， 在 浏览 器 中 预览 ， 比 较 效果 如 图 5.2 所 示 。 


Se 
知 我 者 ， 谓 我 心 忧 ， 不 知 我 者 ， 谓 我 休 求 。 


嬉子 的 游 几 ， 小 人 长 碟 戌 - 


图 5.2 比较 正常 字体 和 斜体 效果 


5.1.6 ”定义 修饰 线 


使 用 CSS3 的 text-decoration 属性 可 以 定义 字体 修饰 线 效 果 ， 用 法 如 下 。 


text-decoration : none || underline || blink || overline || line-through 


»*99. 


eic 各 muk 开 直 信和 站 到 精通 ( 稚 课 靖 病 县 ) 


| 
| 
| 
| 其中，normal 为 默认 值 ， 表 示 无 装饰 线 , underline 表示 下 画 线 效果 ，blink 表示 闪烁 效果 ,overline 表示 
| 
| 


| 上 夯 线 效果 ，line-through 表示 贯穿 线 效 果 。 
;对 | 【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 定 义 装饰 字体 样式 类 。 
| 第 1 步 ， 新 建 test.html 文档 ， 在 <head> 标签 内 添加 <style type="textcss"> 标签 ， 定义 一 个 内 部 样 


Note 式 去 。 
第 2 步 , 输入 下 面 的 样式 代码 ， 定 义 3 个 装饰 字体 样式 类 。 
underline {text-decoration:underline:} 店 下 夯 线 样式 类 */ 
.overline {text-decoration:overline:} 上 # 上 画 线 样式 类 */ 
.line-through {text-decoration:line-through:} 证 删除 线 样式 类 */ 


第 3 步 , 在 <body> 标签 中 输入 以 下 3 行 段落 文本 代码 ， 并 分 别 应 用 上 面 的 装饰 类 样式 。 

<p class="underline"> 昨夜 西风 凋 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 

<p class="overline"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> 

<p class="line-through"> 众 里 寻 他 千百度 ， 葛 然 回 首 ， 那 人 却 在 灯火 阑珊 处 </p> 

第 4 步 ， 再 定义 一 个 样式 ， 在 该 样式 中 ， 同 时 声明 多 个 装饰 值 ， 定 义 的 样式 如 下 。 

.line { text-decoration:line-through overline underline: } 

第 5 步 ， 在 <body> 标签 中 输入 一 行 段 落 文本 代码 ， 并 把 第 4 步 创 建 的 样式 类 应 用 到 本 行文 本 中 。 
<p class="line"> 古今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 。</p> 

第 6 步 ， 在 浏览 器 中 预览 ， 多 种 修饰 线 比较 效果 如 图 5.3 所 示 。 


Oe we solrmmr ex] 


图 5.3 多 种 下 画 线 的 应 用 效果 


uu 


次 提示 : CSS3 增强 text-decoration 功能 ， 新 增 如 下 5 个 子 属性 。 

回 text-decoration-line: 设置 装饰 线 的 位 置 ， 取 值 包括 none ( 无 )、underline、overline 、line- 
through、 blink。 

回 textrdecoration-color: 设置 装饰 线 的 颜色 。 

回 text-decoration-style: 设置 装饰 线 的 形状 ， 取 值 包 括 solid、double、dotted、dashed、wavy 
(波浪 线 )。 

text-decoration-skip: 设置 文本 装饰 线条 必须 略 过 内 容 中 的 哪些 部 分 。 

text-underline-position: 设置 对 象 中 的 下 画 线 的 位 置 。 


.Ms 
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关于 这 些 子 属性 的 详细 取 值 说 明和 用 法 ， 请 参考 CSS3 参考 手册 。 由 于 目前 大 部 分 浏览 器 暂 不 支持 这 些 
子 属性 ， 可 以 暂时 忽略 。 


5.1.7 ”定义 字体 的 变 体 


使 用 CSS3 的 font-variant 属性 可 以 定义 字体 的 变 体 效果 ， 用 法 如 下 。 

font-variant : normal | small-caps 

其 中 ，normal 为 默认 值 ， 表 示 正 常 的 字体 ，small-caps 表示 小 型 的 大 写字 母 字体 。 
【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 中 定义 一 个 类 样式 。 


.small-caps {/* 小 型 大 写字 母 样式 类 */ 
font-variant:small-caps:} 


在 <body> 标签 中 输入 一 行 段落 文本 代码 ， 并 应 用 上 面 定义 的 类 样式 。 
<p class="small-caps">font-variant </p> 


注意 ，font-variant 仅 支 持 拉丁 字体 ， 中 文字 体 没 有 大 小 写 效果 区 分 。 如 果 设 置 了 小 型 大 写字 体 ， 但 是 


该 字体 没有 找到 原始 小 型 大 写字 体 ， 则 浏览 器 会 模拟 一 个 。 例 如 ， 可 通过 使 用 一 个 常规 字体 ， 并 将 其 小 写 | 


字母 替换 为 缩小 过 的 大 写字 母 。 


5.1.8 定义 大 小 字体 


使 用 CSS3 的 text-transform 属性 可 以 定义 字体 大 小 写 效果 。 用 法 如 下 。 


text-transform : none | capitalize | uppercase | lowercase 


转换 发 生 ; uppercase 表示 把 所 有 字母 都 转换 成 大 写 ; lowercase 表示 把 所 有 字母 都 转换 成 小 写 。 
【示例 】 新 建 testhtml 文档 ， 在 内 部 样式 表 中 定义 3 个 类 样式 。 


.capitalize {text-transform:capitalize:} 读 首 字母 大 小 样式 类 */ 
.uppercase {text-transform:uppercase:;} 上 # 大 写 样式 类 */ 
.lowercase {text-transform:lowercase:;} 上 # 小 写 样式 类 */ 


在 <body> 标签 中 输入 3 行 段落 文本 代码 ， 并 分 别 应 用 上 面 定义 的 类 样式 。 
<p class="capitalize">text-transform:capitalize:</p> 

<p class="uppercase">text-transform:Uppercase:</p> 

<p class="lowercase">text-transform:lowercase:</p> 


分 别 在 正 和 Firefox 浏览 器 中 预览 ， 则 比较 效果 如 图 5.4 和 图 5.5 所 示 。 


a 


其 中 ，none 为 默认 值 ， 表 示 无 转换 发 生 ; capitalize 表示 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 


a [7Hss 各色 wit 开发 从 入 门 到 茜 适 ( 散 神 茜 久 上) 


SIEITTTERTREEO | @ se SE 


所 图 pcalhosymysitenestLhnl 回 照 vC 


Text-Transform:capitalize; 


TEXT-TRANSFORM:UPPERCASE; Text-transform:capitalize; 


text-transform:lowercase; TEXT-TRANSFORM:UPPERCASE; 


text-transform-lowercase; 


图 5.4 正中 解析 的 大 小 效果 图 5.5 Firefox 中 解析 的 大 小 效果 


5.2 设计 文本 样式 
文本 样式 主要 设计 正文 的 排版 效果 ， 属 性 名 以 text 为 前 组 进行 命 各， 下 面 分 别 进行 介绍 。 


5.2.1 定义 文本 对 齐 


使 用 CSS3 的 text-align 属性 可 以 定义 文本 的 水 平 对 齐 方式 ， 用 法 如 下 。 

text-align : left | right | center | justify 

其 中 ，left 为 默认 值 ， 表 示 左 对 齐 ; right 为 右 对 齐 ; center 为 居中 对 齐 ; justify 为 两 端 对 齐 。 
【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 中 定义 3 个 对 齐 类 样式 。 

.left { text-align: left: } 

.Center { text-align: center: } 

‘Tight { text-align: right: } 

在 <body> 标签 中 输入 3 行 段 落 文本 代码 ， 并 分 别 应 用 上 面 定义 的 3 个 类 样式 。 


<p align="left"> 昨夜 西风 凋 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 
<p class="center"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> 
<p class="right"> 众 里 寻 他 千百度 ， 蓝 然 回首 ， 那 人 却 在 灯火 阑珊 处 </p> 


在 浏览 器 中 预览 ， 比 较 效果 如 图 5.6 所 示 。 


昨夜 西风 福 匠 树 ， 独 上 高 棱 ， 户 尽 天 短路 


衣 带 放宽 红 不 悔 ， 为 伊 消 和 月 人 改 笃 
众 里 寻 他 干 百 变 ， 医 然 加 首 ， 邦人 却 在 灯火 山王 处 


图 5.6 比较 3 种 文本 对 齐 效果 
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这 提示 : CSS3 为 text-align 属性 新 增多 个 属性 值 ， 简 单 说 明 如 下 。 
justify: 内 容 两 端 对 齐 。CSS2 曾经 支持 过 ， 后 来 放弃 。 
回 start: 内 容 对 齐 开始 边界 。 
回 end: 内 容 对 齐 结束 边界 。 
回 match-parent: 与 inherit ( 继承 ) 表现 一 致 。 
回 ”justify-all: 效果 等 同 于 justify， 但 还 会 让 最 后 一 行 也 两 端 对 草 。 
由 于 大 部 分 浏览 器 对 这 些 新 属性 值 支持 不 是 很 友好 ， 读 者 可 以 暂时 忽略 。 


5.2.2 ”定义 垂直 对 齐 


使 用 CSS3 的 vertical-align 属性 可 以 定义 文本 垂直 对 齐 ， 用 法 如 下 。 
Vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length 


取 值 简单 说 明 如 下 。 
auto 将 根据 layout-flow 属性 的 值 对 齐 对 象 内 容 ; 
baseline 表示 默认 值 ， 表 示 将 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 ; 
sub 表示 垂直 对 齐 文本 的 下 标 ; 
super 表示 垂直 对 齐 文本 的 上 标 ; 
top 表示 将 支持 valign 特性 的 对 象 的 内 容 对 象 顶 端 对 齐 ; 
text-top 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 顶端 对 齐 ; 
middle 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 ; 
bottom 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 底 端 对 齐 ; 
text-bottom 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对 齐 ; 
length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 ， 可 为 负数 ， 定 义 由 基线 算 起 的 偏 移 | 
量 ， 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0%。 
【示例 】 新建 testl.html 文档 ， 在 <head> 标签 内 添加 <style type="text/ess"> 标签 ， 定 义 一 个 内 部 样式 表 ， 
然后 输入 下 面 的 样式 代码 ， 定 义 上 标 类 样式 。 


.super {vertical-align:super:} 

在 <body> 标签 中 输入 一 行 段落 文本 代码 ， 并 应 用 上 面 定义 的 上 标 类 样式 。 
<p>vertical-align 表示 垂直 <span class=" super "> 对 齐 </span> 属性 </p> 

在 浏览 器 中 预览 ， 显示 效果 如 图 5.7 所 示 。 


办 办 办 办 办 多 凶 凶 


OLS won ~ rm 


vertieal-align 表 示 垂直 对 齐 属性 


图 5.7 文本 上 标 样 式 效果 
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| 


5.2.3 ”定义 文本 间距 


使 用 CSS3 的 letter-spacing 属性 可 以 定义 字 距 ,使 用 CSS3 的 word-spacing 属性 可 以 定义 词 距 。 这 两 个 
NR 了 莉 属性 的 取 值 都 是 长 度 值 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 默认 值 为 normal， 表 示 默 认 间隔 。 
| 定义 词 距 时 ， 以 空格 为 基准 进行 调节 ， 如 果 多 个 单词 被 连 在 一 起 ， 则 被 word-spacing 视 为 一 个 单词 ; 如 
果 汉字 被 空格 分 隔 ， 则 分 隔 的 多 个 汉字 就 被 视 为 不 同 的 单词 ，word-spacing 属性 此 时 有 效 。 
| 【示例 】 下 面 的 示例 演示 了 如 何 定义 字 距 和 词 距 样式 。 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 
| 标签 内 添加 <style type="text/ess"> 标签 ， 定义 一 个 内 部 样式 表 ， 然 后 输入 下 面 的 样式 代码 ， 定 义 两 个 类 


| 样式。 


上. 
| .lspacing {letter-spacing:lem:} 证 字 距 样式 类 */ 
.wspacing {word-spacing:lem:} 上 # 词 距 样式 类 */ 


在 <body> 标签 中 输入 两 行 段落 文本 代码 ， 并 应 用 上 面 定 义 的 两 个 类 样式 。 

<p class="lspacing">letter spacing word spacing ( 字 间 距 ) </p> 

<p class="wspacing">letter spacing word spacing ( 词 间距 ) </p> 

在 浏览 器 中 预览 ， 显 示 效 果 如 图 5.8 所 示 。 从 图 中 可 以 直观 地 看 到 ， 所 谓 字 距 就 是 定义 字母 之 间 的 间 
距 ， 而 词 距 就 是 定义 西 文 单词 的 距离 。 


De "poche Pc 


letter spacing word spacinag ( 宁 向 算 ) 


letler -spacing word 。 specing〔 词 间距 ) 


注意 ， 字 距 和 词 距 一 般 很 少 使 用 ,使 用 时 应 慎重 考虑 用 户 的 阅读 体验 和 感受 。 对 于 中 文 用 户 来 说 ， 
| letter-spacing 属性 有 效 ， 而 word-spacing 属性 无 效 。 
| 
| 
中 


5.2.4 定义 行 高 


| 
| 
| 
| 
| 图 5.8” 字 距 和 词 距 演示 效果 比较 
| 
| 
| 


使 用 CSS3 的 line-height 属性 可 以 定义 行 高 ， 用 法 如 下 。 
line-height : normal | length 


其 中 ，normal 表示 默认 值 ， 一 般 为 1.2em; length 表示 百分比 数字 ,或 者 由 浮 点 数字 和 单位 标识 符 组 成 
| 的 长 度 值 ， 允 许 为 负 值 。 

| 【示例 】 新 建 testhtml 文档 ， 在 <head> 标签 内 添加 <style type="text/ess"> 标签 ， 定 义 一 个 内 部 样式 表 ， 
输入 下 面 的 们 式 代码 ， 定 义 两 个 和 高 样式 。 

| 
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| 
| 
| 
| 

D1 {上 * 行 高 样式 类 1 */ 
}line-height: lem: 片 行 高 为 一 个 字 大 小 */ | 
.p2 {/* 行 高 样式 类 2 */ | 
}line-height:2em: 让 行 高 为 两 个 字 大 小 */ | 
| 
| 


在 <body> 标签 中 输入 两 行 段落 文本 代码 ， 并 应 用 上 面 定义 的 两 个 类 样式 。 


<hl> 人 生 三 境界 <hl> | 
<h2> 出 自 王 国 维 《 人 间 词 话 》</h2> | 

<p class="p1"> 古今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : " 咋 夜 西风 凋 牧 树 。 独 上 高 楼 ， 望 断 天 沽 路 。" 此 | 
第 一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 蓝 然 回首 ， 那 人 却 在 灯 | 
| 

| 

| 


Note 


火 阑珊 处 。" 此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 站 以 此 意 解释 诸 词 ， 恺 为 曼 欧 诸 公 所 不 许 也 。</p> 

<p class="p2"> 笔者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 十 果敢 坚忍 ， 
不 屈 不 挠 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 逾越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 后 ， 
回 望 来 路 的 人 ， 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 还 是 山 ， 
看 水 还 是 水 。</p> 


在 浏览 器 中 预览 ， 显 示 效 果 如 图 5.9 所 示 。 


| 
| 

人 生 三 境界 
出 自 王国 维 《 人 间 词话 》 | 
| 
| 


ET 大 学 问 者 ， 和 Ha 相识 要 a "此 第 
也 。" 衣 市 渐 宽 终 不 悔 ， 为 伊 消 得 人 翁 储 . "此 第 二 境 也 。" 众 里 姓 他 干 巨 然 辐 首 ， 那 人 却 在 


作风 全 "此 第 三 境 也 。 WE 计生 内阁 二 短 加 人 公所 不 许 


笔者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 韦 界 ， 但 要 想 饮 越 它 却 不 是 于 么 简单 .成 功 人 士 果 敢 坚 忍 ， 不 
属 不 挠 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他们 途 越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 白 我 的 极限 。 成 
功 后 回 望 来 路 的 人 ， 才 会 明白 另 解 这 三 重 境 虐 的 话 : 看 山 是 山 ， 厦 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 
水 ; 看 山 还 是 山 ， 看 水 还 是 水 。 


图 5.9 段落 文本 的 行 高 演示 效果 


| 
| 
| 
| 
5.2.5 ”定义 首 行 缩 进 
使 用 CSS3 的 text-indent 属性 可 以 定义 文本 首 行 缩 进 ， 用 法 如 下 。 | 
text-indent : length | 
| 
length 表示 百分比 数字 ,或 者 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 建 议 在 闪 设置 缩 进 单 | | 
位 时 ， 以 em 为 设置 单位 ， 它 表示 一 个 字 距 ， 这 样 比较 精确 确定 首 行 缩 进 效 果 。 
【示例 1】 新 建 test.html 文档 ， 在 <head> 标签 内 添加 <style type="text/ess"> 标签 ， 定 义 一 个 内 部 样式 
表 ， 输 入 下 面 的 样式 代码 ， 定 义 段 落 文本 首 行 缩 进 两 个 字符 。 | 
p { text-indent:2em:} 访 首 行 缩 进 两 个 字 距 六 
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在 <body> 标签 中 输入 如 下 标题 和 段落 文本 代码 。 


<hl> 人 生 三 境界 <hl> 

<h2> 出 自 王国 维 《 人 间 词 话 》</h2> 

<p> 古今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 :" 昨夜 西风 凋 碧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 境 也 。 
" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 改 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。" 
此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 下 以 此 意 解释 诸 词 ， 恶 为 曼 欧 诸 公所 不 许 也 。</p> 

<p> 笔者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 士 果 敢 坚 忍 ， 不 届 不 挠 ， 
造就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 请 越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 后 回 望 来 路 的 
人 ，, 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 还 是 山 ， 看 水 还 是 
水 。 </Ip> 


在 浏览 器 中 预览 ， 可 以 看 到 文本 缩 进 效果 ， 如 图 5.10 所 示 。 
【示例 2】 使 用 text-indent 属性 可 以 设计 悬垂 缩 进 效果 。 
新 建 一 个 网 页 ， 保 存 为 testl.html， 在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定 义 一 个 内 部 样 


| 输入 下 面 的 样式 代码 ， 定 义 段落 文本 首 行 缩 进 负 的 两 个 字符 ， 并 定义 左 侧 内 部 补 白 为 两 个 字符 。 
p {* 乃 垂 缩 进 2 个 字 距 */ 
text-indent:-2em:; 启 首 行 缩 进 */ 


text-indent 属性 可 以 取 负 值 ， 定 义 左 侧 补 白 ， 防 止 取 负 值 缩 进 导 致 首 行文 本 伸 到 段落 的 边界 外 边 。 

在 <body> 标签 中 输入 如 下 标题 和 段落 文本 代码 。 

<hl>《 人 间 词 话 》 节 选 <hl> 

<h2> 王国 维 </h2> 

<p> 古今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 :" 咋 夜 西风 凋 牧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 境 也 。 


" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 翌 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 歼 然 回 首 ， 那 人 却 在 灯火 阐 珊 处 。 
"此 第 三 境 也。 此 等 语 皆 非 大 词 人 不 能 道 。 然 迷 以 此 意 解释 诸 词 ， 恶 为 受 欧 诸 公所 不 许 也 。</p> 


在 浏览 器 中 预览 ， 可 以 看 到 文本 悬垂 缩 进 效果 ， 如 图 5.11 所 示 。 


| 
| 
| 
| 
} padding-left:2em:; 启 左 侧 补 白 */ 
| 
| 
| 


| 

| 

| 

| 

| EECI ET € Err [rE 
| 一 a y 

”| 信 生 三 境界 《人 间 词 话 》 节 选 

| 出 自 王 国 维 《人 间 词话 》 

| 之 成 太 事业 、 反 凤 必 经 过 三 种 之 

| 一 境 也 。" 胡 苍 

| 
| 
| 
| 
| 
| 
| 
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古今 
上 高生， 大 
巷 ， 册 条 二 寺 也 人 用处 、 
和 


人 惟 
度 ， 短 然 回首 ， 和 和 


图 5.10 首 行 缩 进 效 果 图 5.11 悬垂 缩 进 效果 
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5.3 CSS3 文本 模块 


线 上 阅读 


CSS3 文本 模块 把 与 文本 相关 的 属性 单独 进行 规范 ， 具 体 介 绍 请 扫 码 了 解 。CSS3 文本 模块 不 再 局 限于 | 


字体 、 字 号 、 颜 色 、 样 式 、 粗 细 、 间 距 等 基本 字体 设置 ， 它 优化 了 已 经 定义 的 属性 ， 整 合 了 各 种 私有 属性 ， 
给 文本 添加 一 些 高 级 功能 。 下 面 重 点 介绍 CSS3 一 些 常用 的 文本 属性 。 


5.3.1 文本 溢出 


text-overflow 属性 可 以 设置 超 长 文本 省 略 显示 。 基 本 语法 如 下 所 示 。 
text-overflow: clip | ellipsis 

适用 于 块 状元 素 ， 取 值 简单 说 明 如 下 。 

回 clip: 当 内 联 内 容 溢出 块 容器 时 ， 将 溢出 部 分 裁 切 掉 ， 为 默认 值 。 
回 ellipsis: 当 内 联 内 容 溢 出 块 容器 时 ， 将 溢出 部 分 替换 为 (.… )。 

党 提示 : 要 实现 溢出 时 产生 省 略 号 的 效果 ， 还 应 定义 两 个 样式 : 强制 文本 在 一 行内 显示 (white- 
space:nowrap ) 和 溢出 内 容 为 隐藏 (overflow:hidden )， 只 有 这 样 才能 实现 溢出 文本 显示 省 略 号 的 
效果 。 

【示例 】 下 面 的 示例 设计 了 新 闻 列 表 有 序 显 示 ， 对 于 超出 指定 宽度 的 新 闻 项 ， 则 使 用 text-overflow 属 
性 省 略 并 附加 省 略 号 ， 避 免 新 闻 换 行 或 者 撑 开 版 块 ， 演 示 效 果 如 图 5.12 所 示 。 


Oo- ew sce] | 


证 诗 名 名 畏 迹 


全 海内 存 知己 ， 天 波 若 比邻 。 唐 . 王 猛 《 送 杜 少 府 之 .| 
曙 不 知 姑 叶 谁 戎 出 ， 二 月 春风 仅 贸 刀 。 唐 如 知 章 《| 
出 敬 育 千里 目 ， 更 上 一 层 楼 。 唐 王 之 疾 《 登 镜 省 楼 
全 时 天 低 树 ,江青 月 近 人 。 唐 孟浩然 害 建 德江 
时 大 蓝 珀 烟 直 ， 长 河 落日 贺 。 唐 - 王 维 人 《使 至 塞 上 少 


图 5.12 设计 固定 宽度 的 新 闻 栏目 


示例 代码 如 下 。 


<style type="text/css"> 

dl { 放 定 义 新 闻 栏目 外 框 ,设置 固定 宽度 */ 
width:300px: 
border:solid 1px #cce: 


} 
dt ft 设计 新 闻 栏 目标 题 行 样式 */ 
padding:8px 8px: 广 增 加 文本 周围 空 阶 */ 


iO 


css 各 风 ap 开发 从 入 门 到 精通 ( 航 银 皇 纺 县) 


margin-bottom:12px: 


语调 整 底 部 间距 */ 


background:#7FECAD url(images/green.gif) repeat-x: 请 设计 标题 栏 背 景 图 */ 


店 定 义 字体 样式 */ 


font-size: 13px; font-weight:bold:; color:#71790C: 


text-align:left: 


启 恢 复 文本 默认 左 对 齐 */ 


border-bottom:solid 1px #efefef: 语 定 义 浅 色 边 框 线 */ 


dd { 族 设 新 闻 列 表 项 样式 */ 


font-size:0.78em; 


族 固定 每 个 列表 项 的 大 小 */ 


height:1.5em;width:280px: 


启 为 添加 新 闻 项 目 符号 腾 出 空间 */ 


padding:2px 2px 2px 18px: 


启 以 背景 方式 添加 项 目 符号 */ 
background: url(images/icon.gif) no-repeat 6px 25%: 


margin:2px 0; 


店 为 应 用 text-overflow 进行 准备 ， 禁 止 换行 */ 


white-space: nowrap; 


店 为 应 用 text-overflow 进行 准备 ， 禁 止 文本 溢出 显示 */ 


overflow: hidden: 
-0-text-overflow: ellipsis: 
text-overflow: ellipsis: 


请 兼容 Opera */ 
六 兼容 IE. Safari (WebKib */ 


-moz-binding: url( “images/ellipsis.xml#ellipsis'): 请 兼容 Firefox */ 


}</style> 
<d> 
<dt> 唐诗 名 句 精 选 </dt> 


<dd> 海内 存 知 己 ， 天 涯 若 比邻 。 唐 : 王勃 《 送 杜 少 府 之 任 哆 州 》</dd> 
<dd> 不 知 细 叶 谁 裁 出 ， 二 月 春风 似 剪 刀 。 唐 : 贺 知 章 《 咏 柳 》</dd> 
<dd> 欲 穷 千里 目 , 更 上 一 层 楼 。 唐 : 王 之 光 《 登 状 鹤 楼 》</dd> 
<dd> 野 旷 天 低 树 ， 江 清 月 近 人 。 唐 : 孟浩然 《 宿 建 德江 》</dd> 
<dd> 大 漠 扳 烟 直 ， 长 河 落日 圆 。 唐 王 维 《使 至 塞 上 》</dd> 


</d> 


5.3.2 文本 换行 


在 CSS3 中 ,使 用 word-break 属性 可 以 定义 文本 自动 换行 。 基 本 语法 如 下 所 示 。 


word-break: normal | keep-all | break-all 


取 值 简单 说 明 如 下 。 


回 normal: 为 默认 值 ， 依 照 亚洲 语言 和 非 亚洲 语言 的 文本 规则 ， 允 许 在 字 内 换行 。 

回 keep-all: 对 于 中 文 、 韩 文 、 日 文 不 允许 字 断 开 。 适合 包含 少量 亚洲 文本 的 非 亚洲 文本 。 

回 break-all: 与 normal 相同 ， 人 允许 非 亚洲 语言 文本 行 的 任意 字 内 断 开 。 该 值 适合 包含 一 些 非 亚洲 文本 
的 亚洲 文本 ， 如 使 连续 的 英文 字母 间断 行 。 

| word-wrap 属性 没有 被 广泛 支持 ， 特 别 是 Firefox 和 Opera 浏览 器 对 其 支持 比较 消极 ， 这 是 因为 在 早 

| 期 的 W3C 文本 模型 中 ( http://wwww3.org/TR/2003/CR-css3-text-20030514/ ) 放弃 了 对 其 支持 ， 而 是 定义 了 


| wrap-option 属性 代替 word-wrap 


属性 。 但 是 在 最 新 的 文本 模式 中 ( http://www.w3.org/TR/css3-text/ ) 继续 支 
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持 该 属性 ， 并 重 定义 了 属性 值 。 
【示例 】 下 面 的 示例 在 页 面 中 插入 一 个 表格 ， 由 于 标题 行文 字 较 多 ， 标 题 行 常 被 撑 开 ， 影 响 了 浏览 体验 。 
为 了 解决 这 个 问题 ， 借 助 word-break 属性 进行 处 理 ， 比 较 效 果 如 图 5.13 所 示 。 | 


| 
<style type="text/css"> | 
table { Note 
width: 100%; | 
font-size: 14px: | 
border-collapse: collapse: 上 定义 细 线 表格 */ | 
border: 1px solid #cad9ea:; 访 添 加 淡色 细 线 边框 */ | 
table-layout: fxed: 店 定 义 表格 逐步 解析 呈现 ， 避 免 破坏 布局 */ | 
| 
background-image: url(images/th bg]1.gif); 让 使 用 背景 图 模拟 渐变 背景 */ | 
background-repeat: repeat-x; 启 定 义 背 景 图 平 铺 方 式 */ | 
height: 30px: | 
vertical-align:middle: 让 垂直 居中 显示 */ | 
border: 1px solid #cad9ea: 族 添 加 淡色 细 线 边框 | 
padding: 0 lem 0: | 
overflow: hidden: 上 超出 范围 隐藏 显示 ， 避 免 撑 开 单元 格 */ | 
word-break: keep-all: 翌 禁 止 词 断 开 显示 所 | 
White-space: nowrap: 上 # 强 迫 在 一 行内 显示 */ | 
} | 
td{ 
height: 20px: 
border: 1px solid #cad9ea:; 谍 添 加 淡色 细 线 边框 */ 
padding: 6px lem; 诺 增 加 单元 格 空 阶 ， 避 免 文本 挤 在 一 起 */ 
; 


tr:nth-child(even) { background-color: #f5fafe: } 

-Ww4 { width: 4em: } 

</style> 

<table> 
<tr><th class="w4"> 与 文本 换行 相关 的 属性 </th> <th> 使 用 说 明 </th></tr> 
<tr><td>line-break</td><td>......</td></tr> 
<tr><td>word-wrap</td> <td>......</td></tr> 
<tr><td>word-break</td><td>......</td></tr> 
table> 
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ee- 吉 忆 了 许字 新 开 
metafi， 与 amm am 四 可， 克 放 攻守 文本 行 的 性 意 字 内 所 开 。 


当 文 字 坊 出 这 四 时 于 换行， 
行 认 上 示 证 有 文本 ， 舍 并 广 本 问 角 和 他 宁 魏 ， 直 妇 本 结 市 丰 


污 格 式 化 的 文本 ， 不 台 并 廊 字 间 的 宇 白 现 高 ， 当 文字 诗 到 边界 时 


发 生 所 

和 ee， 人 村 文 本 的 和 和 不 食 字 闻 的 白天 高， 当 六 守则 四 生 所 
ea 本 和。 
附和 ， 避 和 太 下 的 机 行 ， 不 人文 字 癌 的 所 下 二， 当 六 宁 明 到 迪 四 时 发生 关 


处 理 前 处 理 后 


图 5.13 禁止 表格 标题 文本 换行 显示 


权威 参考 


定义 的 direction 和 unicode-bidi 属性 基础 上， 新 增 


| 

| 

| 5.3.3 书写 模式 
CSS3 增强 了 文本 布局 中 的 书写 模式 ， 在 CSS 2.1 定 
| 

| 


| writing-mode 属性 。 基 本 语法 如 下 。 
Writing-mode: horizontal-tb | vertical-rl | vertical-lr | Ir-tb | tb-rl 
取 值 简单 说 明 如 下 。 
回 horizontal-tb: 水 平方 向 自 上 而 下 的 书写 方式 ， 类似 正 私有 值 rtb。 
回 vertical-rl: 垂直 方向 自 右 而 左 的 书写 方式 ， 类 似 正 私有 值 tb-rl。 
回 vertical-Tr: 垂直 方向 自 左 而 右 的 书写 方式 。 
加 lrtb: 从 左 到 右 ， 从 上 到 下 。 对 象 中 的 内 容 在 水 平方 向 上 从 左 向 右 流入 ， 后 一 行 在 前 一 行 的 下 面 
显示 。 
加 tb-l: 从 上 到 下 ， 从 右 到 左 。 对 象 中 的 内 容 在 垂直 方向 上 从 上 向 下 流入 ， 自 右 向 左 。 后 一 坚 行 在 前 


一 竖 行 的 左面 。 全 角 字 符 是 竖 直 向 上 的 ， 半 和 角 字 符 如 拉丁 字母 或 片 假名 顺 时 针 旋 转 90° 。 


痊 提示 : direction 设置 文本 流 方 向 ， 取 值 包括 Jr (文本 流 从 左 到 右 ) 和 让 (文本 流 从 右 到 左 )。 unicode- 
bidi 用 于 在 同一 个 页 面 内 显示 不 同方 向 的 文本 ， 与 direction 属性 一 起 使 用 。 


【示例 1】 下 面 的 示例 设计 唐诗 从 右 侧 流入 ， 自 上 而 下 显示 ， 


<style type="text/css"> 
#box { 
float: right: 
writing-mode: tb-rl: 
-webkit-writing-mode: vertical-rl: 
| writing-mode: vertical-rl: 


效果 如 图 5.14 所 示 。 
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</style> 
<div id="box"> 

<h2> 春晓 </h2> 

<p> 春 眠 不 觉 晓 ， 处 处 闻 啼 鸟 。 夜 来 风雨 声 ， 花 落 知 多 少 。</p> 
</div> 


【示例 2】 配合 margin-top: auto 和 margin-bottom: auto 声明 ， 可 以 设计 栏目 垂直 居中 效果 ， 如 图 5.15 
所 示 。 | 
<style type="text/css"> | 

.box { | 
width: 400px: height: 300px: | 
| 

| 


background-color: #f0f39; 
writing-mode: tb-rl: 
-webkit-writing-mode: vertical-rl: 
writing-mode: vertical-rl: 
} | 
.auto { | 
margin-top: auto:; 语 垂 直 居 中 */ | 
margin-bottom: auto: 证 垂直 居中 */ | 
height:120px: | 
} | 
img { height:120px:} 
</style> | 
| 
| 
| 


<div class="box"> 
<div class="auto"><img src="images/bg.png"></div> 
</div> 
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图 5.14 设计 唐诗 传统 书写 方式 图 5.15 设计 垂直 居中 布局 


【示例 3】 下 面 的 示例 设计 一 个 象棋 棋子 ,然后 定义 当 超 链接 被 激活 时 ， 首 行文 本 缩 进 4 个 像素 。 由 于 
使 用 了 垂直 书写 模式 ， 则 文本 向 下 移动 4 个 像素 ， 这样 就 可 以 模拟 一 种 动态 下 沉 效果 ， 如 图 5.16 所 示 。 
<style type="text/css"> 


bn { 
width: 80px: height: 80px: 启 固定 大 小 */ 
line-height: 80px: 尹 垂 直 居 中 村 | 
font-size: 62px: 产 大 字体 所 | 
cursor: pointer: 诺 手 形 指针 样式 */ 、 
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CS 
text-align: center: 上 刻 文 本 居中 显示 */ 
text-decoration:none; 广 清 除 下 划 线 */ 
color: #a78252: 广 字 体 颜 色 */ 
background-color: #ddc390: 上 增加 背景 色 */ 
border: 6px solid #ddc390: 刻 增 加 粗 边 框 */ 
border-radius: 5096: 让 定义 圆 形 显示 */ 
店 定 义 阴影 和 内 阴影 边线 */ 


box-shadow: inset 0 0 0 1px #d6b681, 0 1px, 0 2px. 0 3px, 0 4px: 
writing-mode: tb-rl: 

-webkit-writing-mode: vertical-rl: 

writing-mode: vertical-rl: 


.btn:active { text-indent: 4px:} 
</style> 


<a href="#" class="btn"> 将 </a> 


Ba HB htp//ocalho.. ~ BO 


图 5.16 设计 首 字 下 沉 特效 


5.3.4 “initial 值 


initial 表示 初始 化 属性 的 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 如 果 想 重 置 某 个 属性 为 浏览 器 默认 设置 , 那 


| 么 就 可 以 使 用 该 值 ， 这 样 就 可 以 取消 用 户 定义 的 CSS 样式 。 


注意 , 正 暂 不 支持 该 属性 值 。 
【示例 】 在 下 面 的 示例 中 ， 页 面 中 搬入 了 4 段 文本 ， 然 后 在 内 部 样式 表 中 定义 这 4 段 文本 为 蓝 色 、 加 粗 


| 显示 ， 字 体 大 小 为 24 像素 ， 显 示 效 果 如 图 5.17 所 示 。 


<style type="text/css"> 
pi{ 
color: blue; 
font-size:24px: 
font-weight:bold: 
</style> 
<p> 春 眠 不 觉 晓 ，</p> 
<p> 处 处 闻 啼 鸟 。</p> 
<p> 夜来 风雨 声 ，</p> 
<p> 花 落 知 多 少 。</p> 
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如 果 想 禁止 段落 文本 第 一 行 和 第 三 行 用 户 定义 的 样式 ， 只 需 在 内 部 样式 表 中 添加 一 个 独立 样式 ， 然 后 
把 文本 样式 的 值 都 设 为 initial 值 就 可 以 了 ， 具 体 代 码 如 下 ， 运 行 结果 如 图 5.18 所 示 。 
pnth-child(odd){ 
color initial: 
font-size:initial; 


font-weight:initial: 


} 


G |@ localhostB060/ 女 : 


春 眠 不 觉 晓 ， 
处 处 闻 吵 鸟 。 
夜来 风雨 声 ， 
花 落 知 多 少 。 


图 5.17 定义 段落 文本 样式 图 5.18 恢复 段落 文本 样式 
在 浏览 器 中 可 以 看 到 ， 第 一 句 和 第 三 句 文 本 恢复 为 默认 的 黑色 、 常 规 字体 ， 大 小 为 16 像素 。 
5.3.5 inherit 值 


inherit 表示 属性 能 够 继承 祖先 的 设置 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 
【示例 】 下 面 的 示例 设置 了 一 个 包含 框 ， 高 度 为 200 像素 ,包含 两 个 盒子 ,定义 盒子 高 度 分 别 为 100% 


和 inherit， 正 常情 况 下 都 会 显示 200 像素 ,但 是 在 特定 情况 下 ， 如 当 盒 子 被 定义 为 绝对 定位 显示 ， 则 设置 | 


height: inherit; 能 够 按 预定 效果 显示 ， 而 height: 100%: 就 可 能 撑 开 包含 框 ， 效 果 如 图 5.19 所 示 。 


<style type= "text/css"> 
.box { 
display: inline-block: 
height: 200px: 
width: 45%; 
border: 2px solid #666: 
} 
.box div{ 
width: 200px: 
background-color: #ccc: 
position: absolute: 
) 
.heightl { height: 10096:} 
.height2 {height: inherit:} 
</style> 
<div class="box"> 
<div class="height1">height: 100%:</div> 
</div> 
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<div class="box"> 


<div class="height2">height: inherit:</div> 


</div> 
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| 痊 提示: inherit 表示 继承 属性 值 ， 


图 5.19 比较 inherit 和 100% 高 度 效果 


一 般 用 于 字体 、 左 色 、 背 景 等 ; auto 表示 自 适应 ， 


度 、 外 边 距 和 内 边 距 等 关于 长 度 的 属性 。 


BE 3.6 unset 值 


全 广 这 


一 般 用 于 高 度 、 宽 


unset 表示 擦 除 用 户 声 明 的 属性 值 ， 所 有 的 属性 都 可 以 接受 该 值 。 如 果 必 性 有 继承 的 值 ， 则 该 属性 的 值 


| 等 同 于 inherit， 即 继承 的 值 不 被 撤除 ; 如 果 属 性 没有 继承 的 值 ， 


| 明 的 值 ， 恢 复 初 始 值 。 


注意 ， 正 和 Safari 暂时 不 支持 该 属性 值 。 


| 【示例 】 下 面 的 示例 设计 了 4 段 文 本 ， 第 一 段 和 第 二 段位 于 <div class="box"> 容器 中 ， 
| 示 为 30 像素 的 蓝 色 字体 ， 现 在 擦 除 第 二 段 和 第 四 段 文 本 样式 ， 则 第 二 段 文本 显示 继承 样式 ， 即 12 像素 的 
| 红色 字体 ， 而 第 四 段 文 本 显示 初始 化 样式 ， 即 16 像素 的 黑色 字体 ， 效 果 如 图 5.20 所 示 。 


<style type="text/css"> 
.box {color: red: font-size: 12px:} 
Pp {color: blue: font-size: 30px:} 
p-unset { 
color: unset: 
font-size: unset: 
1 
</style> 
<div class="box"> 
<p> 春 眠 不 觉 晓 ，</p> 


<p class="unset"> 处 处 闻 啼 鸟 。</p> 


</div> 
<p> 夜来 风雨 声 ，</p> 


<p class="unset"> 花 落 知 多 少 。</p> 
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春 眠 不 觉 晓 ， 
夜来 风雨 声 ， 


楷 庙 知 多 少 。 


图 5.20 ”比较 擦 除 后 文本 效果 


5.3.7 all 属 性 


all 属性 表示 所 有 CSS 的 属性 ， 但 不 包括 unicode-bidi 和 direction 这 两 个 CSS 属性 。 
注意 ， 正 暂时 不 支持 该 属性 。 
【示例 】 针 对 上 节 示 例 ， 我 们 可 以 简化 punset 类 样式 。 
p.unset { 
all: unset; 


} 
如 果 在 样式 中 ， 声 明 的 属性 非常 多 ， 使 用 all 会 极为 方便 ， 避 免 逐 个 设置 每 个 属性 。 


5.4 色彩 模式 


和 视频 讲解 | 


CSS 2.1 支持 Color Name ( 颜色 名 称 )、HEX ( 十 六 进 制 颜色 值 )、RGB，CSS 3 新 增 3 种 颜色 模式 为 
RGBA、HSL 和 HSLA， 下 面 分 别 进行 介绍 。 


5.4.1 rgba() 函数 


RGBA 是 RGB 色彩 模式 的 扩展 ， 它 在 红 、 绿 、 蓝 三 原色 通道 基础 上 增加 了 Alpha 通道 。 其 语法 格式 如 | 
下 所 示 。 | 


| 
Tgba(r.g.b.<opacity>) | 
| 
| 
| 


参数 说 明 如 下 。 | 

回 T、g、b: 分 别 表示 红色 、 绿 色 、 蓝 色 3 种 原色 所 占 的 比重 。 取 值 为 正 整 数 或 者 百分数 。 正 整数 值 | 

的 取 值 范围 为 0~255， 百 分 数值 的 取 值 范围 为 0.0% ~ 100.0%。 超 出 范围 的 数值 将 被 截至 其 最 接近 | 

的 取 值 极限 。 注 意 ， 并非 所 有 浏览 器 都 支持 使 用 百分数 值 。 | 

回 ”<opacity>: 表示 不 透明 度 ， 取 值 在 0~ 1。 | 
【示例 】 下 面 的 示例 使 用 CSS3 的 box-shadow 属性 和 rgba0 函数 为 表单 控件 设置 半 透 明度 的 阴影 ， 来 模 | 

拟 柔 和 的 润 边 效果 。 示 例 主要 代码 如 下 ， 预览 效 果 如 图 5.21 所 示 。 | 
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Va ( 微 裸 精 编 版 ) 


<style type="text/css"> 
input, textarea {/* 统一 文本 框 样式 */ 


padding: 4px: 入 增加 内 补 白 ， 增 大 表单 对 象 尺寸 ， 看 起 来 更 大 方 */ 
border solid 1px #E5ESES; 庆 增 加 淡淡 的 边框 线 */ 
outline: 0: 上 # 清除 轮廓 线 */ 
font: normal 13px/100% Verdana, Tahoma, sans-serif: 
width: 200px: 颇 固定 宽度 */ 
background: #FFFFFF: 上 刻 白 色 背 景 */ 
启 设 置 边框 阴影 效果 */ 
box-shadow: rgba(0. 0. 0, 0.1) Opx Opx 8px: 

族 定 义 表单 对 象 获取 焦点 、 和 鼠标 经 过 时 ， 高 亮 显 示 边框 */ 

input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9: } 

label {/* 定义 标签 样式 */ 
margin-left: 10pX: 


color: #999999; 
display:block: /* 以 块 状 显示 ， 实 现 分 行 显示 */ 


} 

.submit input {/* 定义 提交 按钮 样式 */ 
width:auto: 必 自动 调整 宽度 */ 
padding: 9px 15px: 人 # 增 大 按钮 尺寸 ， 看 起 来 更 大 气 */ 
background: #617798: 上 设计 扁平 化 单 色 背 景 */ 
border: 0: 必 清除 边框 线 */ 
font-size: 14px: 语 固定 字体 大 小 */ 
color: #FFFFFF: 启 白 色 字体 

} 

</style> 

<form> 


<p class="name"> 

<label for="name"> 姓名 </label> 

<input type="text" name="name" id="name" /> 
</p> 
<p class="email"> 

<label for="email"> 邮箱 </label> 

<input type="text" name="email" id="email" /> 
</p> 
<p class="submit"> 

<input type="submit" value=" 提交 "/> 


ew -so lg | 


图 5.21 设计 带 有 阴影 边框 的 表单 效果 
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党 提示 : rgba(0,0,0,0.1) 表示 不 透明 度 为 0.1 的 黑色 ， 这 里 不 宜 直接 设置 为 浅 灰 色 ， 因 为 对 于 非 白色 背景 


来 说 ， 灰 色 发 上 庶 ， 而 半 透 明 效果 可 以 避免 这 样 的 情况 。 


5.4.2 hsl() 函数 


HSL 是 一 种 标准 的 色彩 模式 ， 包 括 了 人 类 视力 所 能 感知 的 所 有 颜色 ， 在 屏幕 上 可 以 重 现 16777216 种 颜 | 


hsl(<length>,<percentage>.<percentage>) 


参数 说 明 如 下 。 


色 ,， 是 目前 运用 最 广泛 的 颜色 系统 。 它 通过 色调 ( Hue )、 饱 和 度 ( Saturation ) 和 亮度 ( Lightness ) 3 个 闫 | 
色 通 道 的 释 加 来 获取 各 种 颜色 。 其 语法 格式 如 下 所 示 。 


回 <length> 表示 色调 ( Hue )。 可 以 为 任意 数值 ， 用 以 确定 不 同 的 颜色 。 其 中 0 (或 360、-360 ) 表示 | 
红色 ，60 表示 黄色 ，120 表示 绿色 ，180 表示 青色 ，240 表示 蓝 色 ，300 表示 洋红 。 
回 <percentage> ( 第 一 个 ) 表示 饱和 度 (Saturation)， 可 以 为 0 ~ 100% 的 值 。 其 中 0 表示 灰 度 ， 即 没 | 
| 


有 使 用 该 颜色 ; 100% 饱和 度 最 高 ， 即 颜色 最 艳 。 


回 <percentage> ( 第 二 个 ) 表示 亮度 (Lightness)。 取 值 为 0 ~ 100% 的 值 。 其 中 0 最 暗 ， 显 示 为 黑色 ， 


50% 表示 均值 ，100% 最 亮 ， 显 示 为 白色 。 


【示例 】 设 计 颜 色 表 。 先 选择 一 个 色 值 ， 然 后 利用 调整 颜色 的 饱和 度 和 这 
方案 表 。 在 网 页 设计 中 ， 利 用 这 种 方法 就 可 以 根据 网 页 需要 选择 恰当 的 配色 方案 。 使 用 HSL 颜色 表现 方式 ， | 
可 以 很 轻松 地 设计 网 页 配色 方案 表 ， 模 拟 演示 效果 如 图 5.22 所 示 


<style type="text/css"> 

铺设 计 表 格 边框 样式 ， 并 增加 内 部 间距 ， 以 方便 观看 */ 

table{ border: solid 1px red: background:#eee: padding:6px:} 

店 设 计 列 标题 字体 样式 */ 

th{ color:red; font-size:12px: font-weight:normal:} 

启 设 计 单 元 格 大 小 尺寸 */ 

td{ width:80px: height:30px:} 

户 第 1 行 */ 

tr:nth-child(4) td:nth-of-type(1) {background:hsl(0.100%.100%):}/* 第 1 列 */ 
tr:nth-child(4) td:nth-of-type(2) {background:hsl(0.75%.100%):}* 第 2 列 */ 
tr:nth-child(4) td:nth-of-type(3) {background:hsl(0.50%.100%):}* 第 3 列 */ 
tr:nth-child(4) td:nth-of-type(4) {background:hsl(0.25%.100%):}/* 第 4 列 */ 
tr:nth-child(4) td:nth-of-type(5){background:hs1(0.0%.100%):}/* 第 5 列 */ 
启 第 2 行 */ 

trnth-child(S) td:nth-of-type(1) {background:hsl(0.100%.88%):} 访 第 1 列 */ 
tr:nth-child(5) td:nth-of-type(2) {background:hs1(0.75%.88%):}/* 第 2 列 */ 
tr:nth-child(5) td:nth-of-type(3) {background:hsl(0.50%.88%):}* 第 3 列 */ 
tr:nth-child(5) td:nth-of-type(4) {background:hsl(0.25%.88%):}/* 第 4 列 */ 
tr:nth-child($) td:nth-of-type(5){background:hsl(0.09%.88%):} 广 第 5 列 */ 
证 第 3 行 */ 

tr:nth-child(6) td:nth-of-type(1) {background:hsl(0.100%.759%):}* 第 1 列 */ 
tr:nth-child(6) td:nth-of-type(2) {background:hsl(0.75%.75%):}* 第 2 列 */ 
tr:nth-child(6) td:nth-of-type(3){background:hsl(0.50%.75%):}/* 第 3 列 */ 


i 


世 度 比重 ， 分 别 设计 不 同 的 配色 | | 


2 pe 


NC、 


tr:nth-child(6) td:nth-of-type(4){background:hs1(0.25%.75%):}/* 第 4 列 */ 
tr:nth-child(6) td:nth-of-type(5){backeround:hs1(0,.0%,75%):}* 第 5 列 */ 
证 第 4 行 */ 

tr:nth-child(7) td:nth-of-type(1){background:hsl(0,100%.63%):}/* 第 1 列 */ 
tr:nth-child(7) td:nth-of-type(2){background:hsl(0.75%.63%):}/* 第 2 列 */ 
tr:nth-child(7) td:nth-of-type(3) {background:hsl(0.50%.63%):}/* 第 3 列 */ 
tr:nth-child(7) td:nth-of-type(4){background:hsl(0.25%.63%):}/* 第 4 列 */ 

| tr:nth-child(7) td:nth-of-type(5){background:hsl(0,0%,63%):}/* 第 5 列 */ 

| 产 第 5 行 羽 

| tr:nth-child(8) td:nth-of-type(1) {background:hsl(0.100%.50%):}/* 第 1 列 */ 
| 

| 


tr:nth-child(8) td:nth-of-type(2){background:hsl(0.75%.50%):}/* 第 2 列 */ 
| tr:nth-child(8) td:nth-of-type(3){background:hsl(0.50%.50%):}/* 第 3 列 */ 
| tr:nth-child(8) td:nth-of-type(4){background:hs1(0.25%.50%):}/* 第 4 列 */ 
| tr:nth-child(8) td:nth-of-type(5){background:hsl(0.0%,50%):}* 第 5 列 */ 
| 让 第 6 行 */ 
| tr:nth-child(9) td:nth-of-type(1) {background:hsl(0.100%,38%):}/* 第 1 列 */ 
| tr:nth-child(9) td:nth-of-type(2) {background:hsl(0.75%,38%):}/* 第 2 列 */ 
| tr:nth-child(9) td:nth-of-type(3) {background:hsl(0.50%,38%):}/* 第 3 列 */ 
| tr:nth-child(9) td:nth-of-type(4) {background:hsl(0.25%.38%):}/* 第 4 列 */ 
| tr:nth-child(9) td:nth-of-type(5){background:hs1(0.0%,38%):}/* 第 5 列 */ 
| 启 第 7 行 */ 
| tr:nth-child(10) td:nth-of-type(1) {background:hsl(0,100%.25%):}/* 第 1 列 */ 
| tr:nth-child(10) td:nth-of-type(2) {background:hsl(0,75%,25%):}/* 第 2 列 */ 
tr:nth-child(10) td:nth-of-type(3){background:hsl(0,50%,25%):}/* 第 3 列 */ 
| tr:nth-child(10) td:nth-of-type(4) {background:hsl(0,25%,25%):}/* 第 4 列 */ 
| tr:nth-child(10) td:nth-of-type(5) {background:hsl(0.0%.25%):}/* 第 5 列 */ 
| 店 第 8 行 */ 
| tr:nth-child(11) td:nth-of-type(1) {background:hsl(0.100%,13%):}/* 第 1 列 */ 
| tr:nth-child(11) td:nth-of-type(2){background:hsl(0.75%.13%):}/* 第 2 列 */ 
| tr:nth-child(11) td:nth-of-type(3){background:hsl(0.50%,13%):}/* 第 3 列 */ 
| tr:nth-child(11) td:nth-of-type(4){background:hsl(0.25%.13%):}/* 第 4 列 */ 
| tr:nth-child(11) td:nth-of-type(5){background:hsl(0.0%.13%):}* 第 5 列 */ 
| 第 9 行 */ 
| tr:nth-child(12) td:nth-of-type(1) {background:hsl(0.100%,0%):} 访 第 1 列 */ 
| tr:nth-child(12) td:nth-of-type(2) {background:hsl(0.75%.0%):}/* 第 2 列 */ 
| tr:nth-child(12) td:nth-of-type(3) {background:hsl(0.50%.0%):}/* 第 3 列 */ 
| tr:nth-child(12) td:nth-of-type(4){background:hsl(0.25%.0%):}/* 第 4 列 */ 
| tr:nth-child(12) td:nth-of-type(5) {background:hsl(0.0%.0%):}* 第 5 列 */ 
| </style> 
| <table class="hslexample"> 
| <tbody> 
| <tr> 
| <th>&nbsp:</th><th colspan="5"> 色相 : H=0 Red </th> 
| </tr> 
| <tr> 
| <th>&nbsp:</th><th colspan="5"> 饱和 度 (&rarr:)</th> 
| </tr> 
<tr> 

<th> 亮度 (&darr:)</th> 
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type( 


数 的 第 一 个 参数 值 0 表示 色相 值 ， 第 二 个 参数 值 0% 表示 饱和 度 ， 第 三 个 参数 值 0% 表 


5.4. 


为 白色 


<th>100% </th><th>75% </th><th>50% </th><th>25% </th><th>0% </th> 
</tr> 
</tbody> 
</table> 


© ET nA 


图 5.22 使 用 HSL 颜色 值 设计 颜色 表 


在 上 面 的 代码 中 ，tr:nth-child(4) td:nth-of-type(1) 中 的 tr:nth-child(4) 子 选择 器 表示 选择 行 ， 而 td:nth-of- | 
1) 表示 选择 单元 格 ( 列 )。 其 他 行 选择 器 结构 依 此 类 推 。 在 background:hsl(0,0%,0% 声明 中 , hsl0 函 | 


3 hsla() 函数 


HSLA 是 HSL 色彩 模式 的 扩展 ， 在 色相 、 饱 和 度 、 亮 度 三 要 素 基础 上 增加 了 不 透明 度 参数 。 使 用 | 
HSLA 色彩 模式 ， 可 以 定义 不 同 的 透明 效果 。 其 语法 格式 如 下 


hsla(<length>.<percentage>.<percentage>.<opacity>) 


其 中 ,前 3 个 参数 与 hsl0 函数 参数 含义 和 用 法 相同 ， 第 四 个 参数 <opacity> 表示 不 透明 度 ， 取 值 在 0~ 1。 | 
【 示例】 下面 的 示例 设计 了 一 个 简单 的 登录 表单 ， 表 单 对 象 的 边框 色 使 用 #HE 值 进行 设置 ， 定 义 | 


hsla(0,0%,100%,0.9) 值 进 行 设置 ， 定 义 为 轻微 透明 的 白色 ， 预 览 效 果 如 图 5.23 所 示 。 


<style type="text/css"> 

body{ * 为 页 面 添加 背景 图 像 ， 显 示 在 中 央 顶 部 位 置 ， 并 完全 徐 羔 窗口 */ 
background: #eedfcc url(images/bg.jpg) no-repeat center top: 
background-size: cover: 


} 

-form { * 定 义 表单 框 的 样式 */ 
width: 300px: 刻 固定 表单 框 的 宽度 1/ 
margin: 30px auto: 伴 居 中 显示 专 
border-radius: Spx: 庄 设 计 圆 角 效果 */ 
box-shadow: 0 0 Spx reba(0.0.0.0.1). 语 设 计 润 边 效 果 所 
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; 表单 对 象 的 阴影 色 使 用 rgba(0.0.0.0.1D) 值 进行 设置 ， 定 义 为 非常 透明 的 黑色 ; 字体 颜色 使 用 


Note 


gm 了 is 着 和 ap 开放 从 入 站 到 精 通 (入 名 靖 病 版 ) 


0 3px 2px rgba(0.0.0.0.1): 访 设 计 淡 淡 的 阴影 效果 */ 


} 
-formp { 入 定义 表单 对 象 外 框 圆 角 、 白 边 显示 */ 
width: 100%; 
float: left: 
border-radius: Spx: 
border: 1px solid #ff: 


} 
入 定义 表单 对 象 样式 */ 
.form input[type=text]、 
.form input[type=password] { 
启 固定 宽度 和 大 小 */ 
width: 100%: 
height: S0px: 
padding: 0; 
启 增 加 修饰 样式 */ 
border: none: 让 移出 默认 的 边框 样式 */ 
background: rgba(255.255.255.0.2): 谨 增 加 半 透 明 的 白色 背景 */ 
box-shadow: inset 0 0 10px rgba(255,255,255.0.5): 必 为 表单 对 象 设计 高 亮 效 果 */ 
让 定 义 字体 样式 */ 
text-indent: 10px: 
font-size: 16pX: 
color:hsla(0.0%,100%,0.9); 


text-shadow: 0 -1px 1px rgba(0.0.0.0.4): 语 为 文本 添加 阴影 设计 立 体 效果 */ 
} 
.form input[type=text] { 谍 设 计 用 户 名 文本 框 底部 边框 样式 ， 并 设计 顶部 圆 角 */ 


border-bottom: 1px solid rgba(255.255,255.0.7); 
border-radius: Spx Spx 0 0: 
} 
form input[type=password] { 此 设计 密码 域 文 本 框 顶部 边框 样式 ， 并 设计 底部 圆 角 */ 
border-top: 1px solid rgba(0.0.0.0.1): 
border-radius: 0 0 5px Spx: 


和 
族 定 义 表单 对 象 被 激活 ,或 者 鼠标 经 过 时 ， 增 亮 背 景色 ， 并 清除 轮廓 线 */ 
.form input[type=text]:hover. 
.form input[type=password]:hover. 
.form input[type=text]:focus. 
.form input[type=password]:focus { 
background: rgba(255,255,255.0.4); 
outline: none: 
| 
</style> 
<form class="form"> 
<p> 
<input type="text" id="login" name="login" placeholder=" 用 户 名 "> 
<input type="password" name="password" id="password" placeholder=" 密码 "> 
</p> 
</form> 
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图 5.23 设计 登录 表单 


5.4.4 opacity 属性 


opacity 属性 定义 元 素 对 象 的 不 透明 度 。 其 语法 格式 如 下 。 
opacity: <alphavalue> | inherit: 


取 值 简单 说 明 如 下 。 


回 <alphavalue> 是 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 ， 默 认 值 为 1。opacity 取 值 
为 1 时 ， 则 元 素 是 完全 不 透明 的 ; 取 值 为 0 时， 元素 是 完全 透明 的 ， 不 可 见 的 ; 介 于 1 ~ 0 的 任 
何 值 都 表示 该 元 素 的 不 透明 程度 。 如 果 超 过 了 这 个 范围 ， 其 计算 结果 将 截取 到 与 之 最 相近 的 值 。 


回 inherit 表示 继承 父辈 元 素 的 不 透明 性 。 


【示例 】 下 面 的 示例 设计 <div class="bg"> 对 象 铺 满 整个 窗口 ， 显 示 为 黑色 背景 ， 不 透明 度 为 07,， 这样 | 


可 以 模拟 一 种 半 透 明 的 遮 音 效果 ; 再 使 用 CSS 定位 属性 设计 <div class="login"> 对 象 显 示 在 上 面 。 示 例 3 


代码 如 下 ， 演 示 效 果 如 图 5.24 所 示 。 


<style type="text/css"> 
body {margin: 0: padding: 0:} 
div { position: absolute: } 
-bg{ 
width: 10096: 
height: 100%; 
background: #000; 
opacity: 0.7: 
filter: alpha(opacity=70): 
} login { 
text-align:center: 
width:100%: 
top: 20%: 
} 
</style> 
<div class="web"><img src="images/bg.png" /></div> 
<div class="bg"></div> 
<div class="login"><img src="images/login.png" /></div> 
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图 5.24 设计 半 透 明 的 背景 布 效果 


< 外 注意 : 使 用 色彩 模式 函数 的 alpha 通道 可 以 针对 元 素 的 背景 色 或 文字 颜色 单独 定义 不 透明 度 ， 而 
opacity 属性 只 能 为 整个 对 象 定义 不 透明 度 


5.4.5 transparent 值 


transparent 属性 值 用 来 指定 全 透明 色彩 ， 等 效 于 rgba(0,0,0,0) 值 
【 示例】 下面 的 示例 使 用 CSS 的 border 属性 设计 三 角形 效果 ， 通 过 transparent 颜色 值 让 部 分 边框 透明 
显示 ， 代 码 如 下 ， 效 果 如 图 5.25 所 示 

<style type="text/css"> 

#demo { 
‘width: 0: height: 0: 
border-left: S0px solid transparent: 
border-right: 5O0px solid transparent: 
border-bottom: 100px solid red: 


; 
</style> 
<div id="demo"></div> 


通过 调整 各 边 颜 色 设置 ， 或 者 调整 各 边 宽度 ， 可 以 设计 不 同 角度 的 三 角形 ， 或 者 设计 直角 等 不 同形 状 
回 ”设计 向 右 三 角形 
#demo { 

width: 0: height: 0: 

border-top: S0px solid transparent: 

border-left: 100px solid red: 

border-bottom: S0px solid transparent: 


} 
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回 设计 直角 三 角形 


#demo { 
width: 0: height: 0: | ; 
border-top: 100px solid red: | 
order-top: 100px solid rt | 和食 


border-right: 100px solid transparent: 


} vote 
回 设计 梯形 
#demo { 
height: 0: 
width: 120px; 
border-bottom: 120px solid #ec3504:; 
border-left: 60px solid transparent: 
border-right: 60px solid transparent: 
} 


效果 如 图 5.26 所 示 。 | 
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图 5.25 设计 三 角形 效果 图 5.26 设计 梯形 效果 


5.4.6 ”currentColor 值 


| 
| 
在 CSS 中 ，border-color、box-shadow 和 text-decoration-color 属性 的 默认 值 是 color 属性 的 值 ， | 
【示例 1】 下 面 的 示例 中 ， 为 段落 文本 增加 边框 线 ， 边 框 线 的 颜色 设置 为 color:red:， 显 示 为 红色 。 | 
<style type="text/css"> | 
p{ | 
border:solid 2px: | 
color:red: | 

| 

| 

| 


} 
</style> 
<p> 春 眠 不 觉 晓 ， 处 处 疗 路 鸟 。 夜 来 风雨 声 ， 花 落 知 多 少 。</p> 


在 CSS1 和 CSS2 中 ， 没 有 为 此 定义 一 个 相应 的 关键 字 。 为 此 CSS3 扩展 了 颜色 值 ， 包 含 currentColor | 
关键 字 ， 并 用 于 所 有 接受 颜色 的 属性 上 。currentColor 表示 color 属性 的 值 。 | 
【示例 21 在 下 面 的 示例 中 ,设计 图 标 背 景 颜色 值 为 currentColor， 这 样 在 网 页 中 随 着 链接 文本 的 字体 颜 
色 不 断 变化 ， 图 标的 颜色 也 跟随 链接 文本 的 颜色 变化 而 变化 ， 确 保 整体 导航 条 色彩 一 致 性 ， 达 到 图 文 合 一 | 
的 境界 ,效果 如 图 5.27 所 示 。 | 
<style type="text/css"> | 
.icon { | 


ws 


eic 和 Wzuk 开 雪 从 和 站 到 精通 ( 蕉 课 靖 病 及) 


display: inline-block: 
width: 16px: height: 20px: 
background-image: url(images/sprite_icons.pne); 


background-color: currentColor: /* 使 用 当前 颜色 控制 图 标的 颜色 */ 


.iconl { background-position: 0 0: } 
:icon2 { background-position: -20px 0: } 
| .icon3 { background-position: -40px 0: } 
| :icon4 { background-position: -60px 0: } 
| ink { margin-right: 15px: } 
| .link:hover { color: red: }/* 虽然 改变 的 是 文字 颜色 ， 但 是 图 标 颜 色 也 一 起 变化 了 */ 
| </style> 
| <a href="##" class="link"><i class="icon icon1"></i> 首页 </a> 
| <a href="##" class="link"><i class="icon icon2"></i> 刷新 </a> 
| <a href="##" class="link"><i class="icon icon3"></i> 收藏 </a> 
<a href="##" class="link"><i class="icon icon4"></i> 展开 </a> 


€ 3 CC |© localhost8080/mysite/test2htn 会 | : 


个 首页 吕剧 晰 二 收藏 = 呆 


localhost8080/mysite/test2 htmles 


图 5.27 设计 图 标 背 景色 为 currentColor 


痊 提示 : 如 果 color 属性 设置 为 currentColor， 则 相当 于 color: inherit。 


5.5 文本 阴影 


5.5.1 定义 text-shadow 


| 法 如 下 。 
| text-shadow: none | <length>{2.3} && <color>? 


取 值 简单 说 明 如 下 。 

none: 无 阴影 ， 为 默认 值 。 
| 回 <length> : 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 ， 可 以 为 负 值 。 
| 回 <length> @: 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偏 移 值 ， 可 以 为 负 值 。 


| 

| 

| 

| text-shadow 属性 是 在 CSS2 中 定义 的 ， 在 CSS 2.1 中 被 删除 ， 在 CSS3 的 Text 模块 中 又 恢复 。 基 本 语 
| 

中 
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回 <length> @): 如 果 提 供 了 第 3 个 长 度 值 则 用 来 设置 对 象 的 阴影 模糊 值 ， 不 允许 负 值 。 
回 ”<color>: 设置 对 象 的 阴影 的 颜色 。 
【示例 】 下 面 的 示例 为 段落 文本 定义 一 个 简单 的 阴影 效果 ， 演 示 效 果 如 图 5.28 所 示 。 


<style type= "text/css"> 
pt 
text-align: center': 
font: bold 60px helvetica, arial, sans-serif: 
color: #999: 
text-shadow: 0.1em 0.1em #333; 


! | 
| 
| 


</style> 
<p>HTML5+CSS3</p> 


CE -| htp/ocaho. ~ SC | Biocahort | 


图 5.28 定义 文本 阴影 


text-shadow: 0.1em 0.1em #333; 声明 了 右 下 角 文 本 阴影 效果 ， 如 果 把 投影 设置 到 右上 角 ， 则 可 以 做 如 下 


声明 ,效果 如 图 5.29 所 示 | 
Pp {text-shadow: -0.1em -0.1em #333;} 


同 理 ， 如 果 设 置 阴影 在 文本 的 左下 角 ， 则 可 以 设置 如 下 样式 ， 演 示 效 果 如 图 5.30 所 示 。 
Pp {text-shadow: -0.1em 0.1em #333:} 


DO ee elem + © [CET Ep] 


图 5.29 定义 左上 角 阴 影 图 5.30 定义 左下 角 阴 影 
也 可 以 增加 模糊 效果 的 阴影 ， 效 果 如 图 5.31 所 示 。 


Pt{ text-shadow: 0.1em 0.1em 0.3em #333; } 


或 者 定义 如 下 模糊 阴影 效果 ， 如 图 5.32 所 示 。 


pf text-shadow: 0.1em 0.1em 0.2em black: } | 


本 人 全 全 二 


Eee V7 ( 微 课 精 编 版 ) 


Oo ew "solo | 


图 5.31 定义 模糊 阴影 图 5.32 定义 模糊 阴影 


次 提示 : 在 text-shadow 属性 的 第 一 个 值 和 第 二 个 值 中 ， 正 值 偏 右 或 偏 下 ， 负 值 偏 左 或 偏 上 。 在 阴影 偏 移 


之 后 ， 可 以 指定 一 个 模糊 半径 。 模 糊 半径 是 个 长 度 值 ， 指 出 模糊 效果 的 范围 。 如 何 计算 模糊 效 
果 的 具体 算法 并 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 还 可 以 选择 指定 一 个 颜色 值 。 颜 色 
值 会 被 用 作 阴 影 效 果 的 基础 。 如 果 没 有 指定 颜色 ， 那 么 将 使 用 color 属性 值 来 替代 。 


| 5.5.2 案例 : 设计 特效 字 


下 面 结合 示例 介绍 如 何 灵 活 使 用 text-shadow 属性 设计 特效 文字 效果 。 
【示例 1】 下 面 的 示例 通过 阴影 把 文本 颜色 与 背景 色 区 分 开 来 ， 让 字体 看 起 来 更 清晰 ， 代 码 如 下 ， 演 示 


| 效果 如 图 5.33 所 示 


<style type="text/css"> 


pl 


} 


text-align: center; 

font: bold 60px helvetica, arial, sans-serif: 
color: #fff: 

text-shadow: black 0.1em 0.1em 0.2em:; 


</style> 
<p>HTML5+CSS3</p> 


【示例 2】 下 面 的 示例 演示 了 如 何 为 红色 文本 定义 3 个 不 同 颜色 的 阴影 演示 效果 如 图 5.34 所 示 。 当 


| 参数 。 


| 使 用 text-shadow 属性 定义 多 色 阴影 时 ， 每 个 阴影 效果 必须 指定 阴影 偏 移 ， 而 模糊 半径 、 阴 影 颜色 是 可 选 


<style type="text/css"> 


pl 


} 


text-align: center; 
font:bold 60px helvetica. arial. sans-serif: 
color: Ted: 
text-shadow: 0.2em 0.5em 0.1em #600. 
-0.3em 0.1em 0.1em #060. 
0.4em -0.3em 0.1em #006: 


</style> 
<p>HTML5+CSS3</p> 


Se 
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| 
图 5.33 ”使 用 阴影 增加 前 景色 和 背景 色 对 比 度 图 5.34 定义 多 色 阴 影 | 


赃 提示 : text-shadow 属性 可 以 接受 以 过 号 分 隔 的 阴影 效果 列表 ， 并 应 用 到 该 元 素 的 文本 上 。 阴 影 效果 | 
按照 给 定 的 顺序 应 用 ， 因 此 可 能 会 互相 覆盖 ， 但 是 它们 永远 不 会 覆盖 文本 本 身 。 阴 影 效 果 | 
不 会 改变 框 的 尺寸 ， 但 可 能 延伸 到 它 的 边界 之 外 。 阴 影 效 果 的 堆 司 层次 和 元 素 本 身 的 层次 
是 一 样 的 。 | 


【示例 3】 下 面 演示 把 阴影 设置 到 文本 线 框 的 外 面 ， 代 码 如 下 ， 演 示 效 果 如 图 5.35 所 示 | 


<style type="text/css"> 
p{ | 
text-align: center: | 
font:bold 60px helvetica, arial, sans-serif: | 
color: Ted: | 
border:solid 1px red: | 
text-shadow: 0.5em 0.Sem 0.1em #600, | 
-lem lem 0.1em #060, | 

0.8em -0.8em 0.1em #006: | 

} | 
</style> | 
<p>HTML5+CSS3</p> | 


【示例 4】 借助 阴影 效果 列表 机 制 ， 可 以 使 用 阴影 大 加 出 燃烧 的 文字 特效 ， 代 码 如 下 ， 演 示 效果 如 图 | 
5.36 所 示 。 | 


二 
<style type="text/css"> | 
body {fbackground:#000:} | 
p{ | 
text-align: center: | 
font:bold 60px helvetica, arial, sans-serif: | 
color: red; | 
text-shadow: 0 0 4px white. | 

0 -5px 4px #ff3. | 

2px -10px 6px #fd3. | 

-2pX -15px 11px #f80. | 

2px -25px 18px #f20; | 

} | 
</style> | 
<p>HTML5+CSS3</p> 


vos 


体 文本 


中 左上 和 右 下 阴 景 


,EE 
Oe. ls 六 


图 5.35 定义 多 色 阴 影 图 5.36 
【示例 5】text-shadow 属性 可 以 使 用 在 :first-letter 和 :first-line 伪 元 素 上 
使 用 阴影 和 加 出 立体 文本 特效 代码 如 下 ， 演 示 效 果 如 图 5.37 所 示 


错位 的 补 色 阴 影 ， 营 造 一 种 淡淡 的 立体 效果 


<style type="text/css"> 

body { background: #000; } 

pt 
text-align: center: 
padding: 24px: 
margin: 0; 
font-family: helvetica, arial, sans-serif 
font-size: 80px: 
font-weight: bold: 
color: #D1D1D1; 
background: #CCC: 
text-shadow: -1px -1px white, 

1px 1px #333; 


} 
</style> 
<p>HTML5+CSS3</p> 


【示例 6】 反 向 思 
顶 色 颠倒 即 可 ， 


主要 代码 如 下 ， 演 示 效 果 如 图 5.38 所 示 


<style type="text/css"> 
body { background: #000; } 
pt 
text-align: center: 
padding: 24px: 
margin: 0; 
font-family: helvetica. arial. sans-serif: 
font-size: 80px: 
font-weight: bold; 
color: #D1D1D!1; 
background: #CCC: 
text-shadow: 1px 1px white. 
-1pX -1px #333; 
. 
</style> 
<p>HTMLS+CSS3</p> 


ls 


定义 燃烧 的 


， 利 用 上 面 示例 的 设计 思路 ， 也 可 以 设计 一 种 目 体 如 


同时 还 可 以 利用 该 属性 设计 立 
通过 左上 和 右 下 各 添加 一 个 1 


， 设 计 方法 就 是 把 上 面 示例 


图 5.37 定义 凸 起 的 文字 效果 图 5.38 定义 目下 的 文字 效果 


【示例 7】 使 用 text-shadow 属性 还 可 以 为 文本 描 边 ， 设 计 方法 是 分 别 为 文本 四 个 边 添加 1 像素 的 实体 阴 
影 ， 代 码 如 下 ， 演 示 效 果 如 图 5.39 所 示 。 


<style type= "text/css"> 
body { background: #000: } 
pl{ 
text-align: center: 
padding:24px; 
margin:0; 
font-family: helvetica, arial, sans-serif: 
font-size: 80px; 
font-weight: bold; 
color: #D1D1D1: 
background:#CCC: 
text-shadow: -1px 0 black. 
0 1px black. 
lpx 0 black., 
0 -1px black: 
1 
</style> 
<p>HTMLS+CSS3</p> 


【示例 8】 设计 阴影 不 发 生 位 移 ， 同 时 定义 阴影 模糊 显示 ， 这 样 就 可 以 模拟 出 文字 外 发 光 效 果 ， 代 码 如 
下 ， 演 示 效 果 如 图 5.40 所 示 。 


<style type="text/css"> 

body { background: #000: } 

p{ 
text-align: center: 
padding:24px; 
margin:0; 
font-family: helvetica. arial. sans-serif: 
font-size: 8Opx: 
font-weight: bold: 
color: #DID1D1: 
background:#CCC: 
text-shadow: 0 0 0.2em #F87. 

00 0.2em 考 87: 

} 

</style> 

<p>HTML5+CSS3</p> 


sl29s 
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图 5.39 定义 描 边 文字 效果 图 5.40 定义 外 发 光 文字 效果 


5.6 动态 内 容 


content 属性 属于 内 容 生成 和 替换 模块 ， 可 以 为 匹配 的 元 素 动 态 生 成 内 容 。 这 样 就 能 够 满足 在 CSS 样式 


| 设计 中 临时 添加 非 结构 性 的 样式 服务 元 素 ， 或 者 添加 补充 说 明 性 内 容 等 。 


| 5.6.1 定义 content 


content 属性 的 简明 语法 如 下 。 
content: normal | string | attrO | uriO | counter() | none: 


取 值 简单 说 明 如 下 。 

回 normal: 默认 值 。 表 现 与 none 值 相同 。 

回 string: 插入 文本 内 容 。 

回 attr0: 插入 元 素 的 属性 值 。 

回 uri0: 插入 一 个 外 部 资源 ， 如 图 像 、 音 频 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 。 

回 counter0: 计数 器 ， 用 于 插入 排序 标识 。 

回 none: 无 任何 内 容 。 

提示 : content 属性 早 在 CSS 2.1 中 就 被 引入 ， 可 以 使 用 :before 和 :after 伪 元 素 生成 内 容 。 此 特性 目前 
已 被 大 部 分 的 浏览 器 支持 ， 另 外 Opera 9.5+ 和 Safari 4 已 经 支持 所 有 元 素 的 content 属性 ， 而 不 
仅仅 是 :before 和 :after 伪 元 素 。 

在 CSS 3 Generated Content 工作 草案 中 ，content 属性 添加 了 更 多 的 特征 ， 例 如 ， 插 入 以 及 移 除 文档 内 


容 的 能 力 ， 可 以 创建 脚注 、 有 段落 注释 等 。 但 目前 还 没有 浏览 器 支持 content 的 扩展 功能 。 


【示例 1】 下 面 的 示例 使 用 content 属性 为 页 面 对 象 添加 外 部 图 像 ， 演 示 效 果 如 图 5.41 所 示 。 


<style type="text/css"> 


div:after { 
border: solid 10px red: 
content: url(images/bg.png): /* 在 div 元 素 内 添加 图 片 */ 
</style> 
<div> 
<h2> 动态 生成 的 图 片 </h2> 
</div> 
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注意 ，content 属性 通常 与 :after 及 :before 伪 元 素 一 起 使 用 ， 在 对 象 前 或 后 显示 内 容 。 | 
【示例 2】 下 面 的 示例 使 用 content 属性 把 超 链接 的 URL 字符 串 动态 显示 在 页 面 中 ， 演 示 效 果 如 图 5.42 | 
所 示 。 | 
<style type="text/css"> | 
aafter { 
content: attr(href): 


2 
</style> 
<a href="http://www.baidu.com/"> 百度 </a> 


人 3 @ [© locahosta060/mysitefiest 全 | : 


动态 生成 的 图 片 


x 


SEE 让 四 -| 你 htpyiocalho-  B © | @ localho: 


| 
oem | 
| 
http://www.baidu.com/ | 
| 
| 
| 
| 


图 5.41 动态 生成 图 像 演示 效果 图 5.42 ”把 超 链接 的 URL 字符 串 动态 显示 在 页 面 中 


5.6.2 案例: 应 用 content | 
下 面 结合 多 个 示例 ， 练 习 content 在 网 页 中 的 应 用 | 
【示例 1】 下面 的 示例 使 用 content 属性 ， 配 合 CSS 计数 器 进行 多 层 租 套 有 序列 表 序 号 设计 ， 效 果 如 | 

图 5.43 所 示 。 
<style type="text/css"> 


| 

ol { list-style:none:} 雍 清 除 默认 的 序号 */ | 
li:before {color:#f00: font-family:Times New Roman:} 雍 设 计 层级 目录 序号 的 字体 样式 */ | 
lifcounter-increment:a 1:} 广 设 计 递增 函数 a， 递增 起 始 值 为 1 */ | 
li:before{content:counter(a)". “:} 广 把 递增 值 添加 到 列表 项 前 面 */ | 
lili{counter-increment:b 1:} 入 设计 递增 函数 b， 递 增 起 始 值 为 1 */ | 
li li:before {content:counter(a)"."counter(b)". “:} 广 把 递增 值 添加 到 二 级 列表 项 前 面 */ | 
lililifcounter-increment:c 1:} 广 设 计 递增 函数 c， 递增 起 始 值 为 1 */ | 
lili li:before {content:counter(a)"."counter(b)"."counter(c)". “:} 广 把 递增 值 添加 到 三 级 列表 项 前 面 */ | 
</style> | 
<hl> 网 站 导航 </h1> | 
<o> | 
<li> 新 闻 | 
<oP> | 

<li> 国际 新 闻 </li> | 

<li> 国内 新 闻 | 
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<o> 
<li> 互联 网 /科技 <Ui> 
<li> 财经 /理财 </li> 
</ol> 
</i> 
</oP 
</> 
<li> 交互 </> 
</ol> 


© IS CHE IT 
网 站 导航 


新 闻 
1.1. 国际 新 闻 
12. 国内 新 闻 
12.1. 互联 网 科技 
12.2. 财 经 理财 


图 5.43 使 用 CSS 技巧 设计 多 层级 目录 序号 
【示例 2】 下 面 的 示例 使 用 content 属性 为 引文 动态 添加 引号 ， 演 示 效 果 如 图 5.44 所 示 ， 


<style type="text/css"> 

让 为 不 同 语言 指定 引号 的 表现 */ 
:lang(en) > q {quotes:™ "™;} 
:lang(no) > q {quotes:"«" "»"; 
‘lang(ch) > q {quotes:™ ;} 

店 在 q 元 素 的 前 后 择 入 引号 */ 

qibefore {content:open-quote:} 

q:after {content:close-quote:} 

</style> 

<p lang="no"><q>HTML5+CSS3 从 入 门 到 精通 </q></p> 

<p lang="en"><q>CSS Generated Content Module Level 3</p> 
<p lang="ch"><q>CSS 生成 内 容 模块 3.0</q></p> 


【示例 3】 下 面 的 示例 使 用 content 属性 为 超 链接 动态 添加 类 型 图 标 ， 演 示 效 果 如 图 5.45 所 示 。 


<style type="text/css"> 
a[href $=".pdf"']:after { 
content:url(images/icon_pdf.png): 
a 
alrel = "external"]:after { 
content:url(images/icon_ link.png): 
} 
</style> 
<a href="http://www.book.com/1688.pdf*>《HTML5+CSS3 从 入 门 到 精通 》</a><br> 
<a href="http://www.book.com/1688/" rel="external">《HTML5+CSS3 从 入 门 到 精通 》</a> 


sa 
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AHITML5+CSS3 从 入 门 到 精通 

"CSS Generated Contcnt Module Levcl3” 
“Css 生 成 内 容 概 块 30" 


图 5.44 动态 生成 引号 图 5.45 动态 生成 超 链接 类 型 图 标 


权威 参考 


CSS3 允许 用 户 通 过 @font-face 规则 ， 加 载 网 络 字 体 文件 ， 实 现 自 定义 字体 类 型 的 功能 。@font-face 规 
则 在 CSS3 规范 中 属于 字体 模块 。 


5.7.1 使 用 @font-face 


@font-face 规则 的 语法 格式 如 下 。 


@font-face { <font-description> } 


@font-face 规则 的 选择 符 是 固定 的 ， 用 来 引用 网 络 字 体 文件 。<font-description> 是 一 个 属性 名 值 对 ， 格 
式 类 似 如 下 样式 ， 

font-forrily: value: 

font-style: value: 

font-variant: value: 

font-weight: value: 


[| 


| 

| 
SIc: Value: | 

| 
属性 及 其 取 值 说 明 如 下 。 | 
font-family: 设置 文本 的 字体 名 称 。 | 
font-style: 设置 文本 样式 。 | 
font-variant: 设置 文本 是 否 大 小 写 | 
font-weight: 设置 文本 的 粗细 。 | 
font-stretch: 设置 文本 是 否 横向 的 拉 伸 变形 。 | 
font-size: 设置 文本 字体 大 小 。 | 
ste: 设置 自 定义 字体 的 相对 或 者 绝对 路 径 。 注 意 ， 该 属性 只 用 在 @font-face 规则 里 。 


涪 提示 ; 事实 上 ， 正 5 已 经 开始 支持 该 属性 ， 但 是 只 支持 微软 公司 自在 的 cot (Embedded Open Type) 
字体 格式 ， 而 其 他 浏览 器 直到 现在 都 不 支持 这 一 字体 格式 。 不 过 ， oo 
设置 ttf ( TrueType ) 和 .otf ( OpenType ) 两 种 字体 作为 自 定义 字体 了 。 考 虑 到 浏览 器 的 兼容 性 ， 
在 使 用 时 建议 同时 定义 .eot 和 ttf， 以 便 能 够 兼容 所 有 主流 浏览 器 。 


办 办 办 办 办 办 轨 


sl33s 


名 HH 名 动 Wt 开 家 从 入 门 到 将 通 ( 币 刘 业绩 上 县) 


| 【示例 ] 下 面 是 一 个 简单 的 示例 ， 演 示 如 何 使 用 @font-face 规则 在 页 面 中 使 用 网 络 字体 。 示 例 代码 如 下 ， 
| 演示 效果 如 图 5.46 所 示 。 


<style type="text/css"> 
语 引 入 外 部 字体 文件 */ 
@font-face { 
族 选择 默认 的 字体 类 型 */ 
font-family: “lexograph": 
让 兼容 下 */ 
src: url(http://randsco.cony/fonts/lexograph.eot): 
让 莱 容 非 正 */ 
src: local( “Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype"): 
1 
hl { 
店 设 置 引 入 字体 文件 中 的 lexograph 字体 类 型 */ 
font-family: lexograph, verdana, sans-serif 
font-size:4em:; 
</style> 
<hl>http://www.baidu.com/</h1> 


€ 3 © [D localhost/mysite/testhtml 安 赵 名 三 


HT PE BAL Uo 


图 5.46 设置 为 lexograph 字体 类 型 的 文字 


| 
| 
| 11 

| 僵 提示 : 谱 入 外 部 字体 需要 考虑 用 户 带 宽 问 题 ， 因 为 一 个 中 文字 体 文件 小 的 有 几 MB ， 大 的 有 十 几 MB， 
| 这 么 大 的 字体 文件 下 载 过 程 会 出 现 延 迟 ， 同 时 服务 器 也 不 能 忍受 如 此 频繁 的 申请 下 载 。 如 果 只 
| 是 想 标题 使 用 特殊 字体 ， 最 好 设计 成 图 片 。 

| 

| 

| 


5.7.2 案例: 设计 字体 图 标 
| 本 节 示 例 通过 @font-face 规则 引入 外 部 字体 文件 glyphicons-halflings-regulareot， 然 后 定义 几 个 字体 图 
| 标 ， 嵌入 在 导航 菜单 项 目 中 ,效果 如 图 5.47 所 示 。 


SEEICIISCEIG ET 


| 会 主页 || 蜂 登 录 || Q 搜索 || @; | 


| 图 5.47 设计 包含 字体 图 标的 导航 菜单 
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示例 主要 代码 如 下 。 
<style type="text/css"> 
入 引入 外 部 字体 文件 */ 
@font-face { 
font-family: 'Glyphicons Halflings': /* 选择 默认 的 字体 类 型 */ 
让 外 部 字体 文件 列表 */ 
src: url(fonts/glyphicons-halflings-regulareot): 
src: url('fonts/glyphicons-halflings-regular.eot?#iefix") format(‘embedded-opentype'), 
url('fonts/glyphicons-halflings-regular. woff2") format(‘woff2"). 
wl('fonts/glyphicons-halflings-regular.woff ) format('woff ). 
url('fonts/glyphicons-halflings-regular.ttf ) format('‘truetype'). 
url(fonts/glyphicons-halflings-regularsvg#glyphicons halflingsregular) format('sve'): 


} 
族 定 义 字体 图 标 样式 */ 
.glyphicon { 
position: relative: 人 # 相 对 定位 */ 
top: 1px: 读 相 对 向 上 偏 移 1 个 像素 */ 
display: inline-block:; 此 行内 块 显示 */ 
font-family: 'Glyphicons Halflings'; 让 定义 字体 类 型 */ 
font-style: normal:; 店 字 体 样式 */ 
font-weight: normal: 店 字 体 粗细 */ 
line-height: 1; 启 定 义 行 高 ， 清 除 文本 行 对 图 标的 影响 */ 
-webkit-font-smoothing: antialiased: 习 兼容 Chrome 浏览 器 解析 */ 
-Imoz-osX-font-smoothing: grayscale: 上 # 兼 容 Firefox 浏览 器 解析 */ 
} 


.glyphicon-home:before { content: "\e021"; } 
.glyphicon-user:before { content: "\e008"; } 
.glyphicon-search:before { content: We003": } 
.glyphicon-plus:before { content: "\e081"; } 
span {l* 定义 字体 图 标 元 素 样式 */ 
font-size: 16pX: 
color: red: 
1 
ul {这 定义 导航 列表 框 样式 ， 清 除 默认 样式 */ 
margin: 0: 
padding: 0: 
list-style: none: 
} 
It 定义 列表 项 目 样式 ， 水 平 并 列 显示 */ 
float: left: 
padding: 6px 12px: 
margin: 3px: 
border: solid 1px hsla(359.93%.69%.0.6): 
border-radius: 6px: 
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Note 


is 和 zu 开发 从 和 站 到 本道 ( 微 裸 精 编 版 ) 


Eee 

Cem、 

} 

lia {/* 定义 超 链接 文本 样式 */ 


font-size: 16px: 
color: red:; 
text-decoration: none; 
} 
</style> 
<Ul> 
<li><span class="glyphicon glyphicon-home"></span> <a href= 


"> 主页 </a></li> 


<li><span class="glyphicon glyphicon-user"></span> <a href="#"> 登录 </a></li> 

<li><span class="glyphicon glyphicon-search"></span> <a href="#"> 搜索 </a></li> 

<li><span class="glyphicon glyphicon-plus"></span> <a hre 人 ="#"> 添加 </a></li> 
</ul> 


5.8 案例 实战 


5.8.1 设计 文本 新 闻 页 


本 例 模拟 手机 搜狐 网 的 文本 新 闻 网 页 ， 效 果 如 图 5.48 所 示 。 整 个 页 面 主体 为 上 、 中 、 下 结构 。 顶 部 内 容 
包括 标题 文字 和 主页 链接 按钮 ， 中 部 内 容 包 括 文本 新 闻 的 标题 和 正文 ， 底 部 内 容 包 括 多 个 超 链接 和 版 权 信 息 。 


未 来 10 年 ， 苹 果 会 输 给 亚 马 名 ?了 


苹果 

作为 目前 市 值 最 高 的 公司 ， 苹 果 始终 在 向 投资 者 
证 明 ， 它 有 能 力 继续 发 展 自己 的 业务 ， 即 便 是 在 产品 
细 分 成 熟 的 时 候 。 当 Ma 销量 增长 放 缓 时， 苹果 的 增 
长 是 由 Tunes 和 iPod 推动 的 。iPod 之 后 是 iPhone、 芋 
果 应 用 店 、iPad、Apple Pay、Apple Watch、Apple 
Music 等 等 。 

亚 马 示 

在 争取 成 为 2028 年 市 值 最 高 的 公司 的 竞赛 中 , 亚 
马 逊 无 疑 是 个 强 有 力 的 竞争 者 。 虽 然 亚马逊 的 估 值 可 
能 会 在 今天 出 现 扩张 ， 其 市 盈 率 为 327 倍 ， 但 亚马逊 的 
业务 不 仅 最 近 增长 迅速 ， 而 且 还 在 以 加 倍 的 速度 增 
长 。 

Alphabet 

在 未 来 10 年 内 ，Alphabet 也 可 能 成 为 这 四 家 公司 
中 市 值 最 高 的 公司 。Alphabet 为 投资 者 提供 了 良好 的 
业务 增长 平衡 、 保 守 的 估 值 比率 和 持续 的 增长 前 景 。 


回 到 拉 狐 首页 


图 5.48 设计 文本 新 闻 页 面 


ls 
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页 面 顶部 结构 使 用 <header> 标签 实现 ， 中 部 结构 使 用 <article> 标签 实现 ， 底 部 结构 使 用 
实现 。 主 体 结构 如 下 。 


<header class="h min"> 

<div class="h min w"> </div> 
</header> 
<article class="fin"> </article> 
<footer class="site"> </footer> 


在 <article class="fin"> 容器 中 ， 包 含 了 一 个 完整 的 新 闻 内 容 。 使 用 <hl class="finTit"> 定义 新 闻 标 题 
用 <div class="finCnt"> 包含 正文 多 段 段落 文本 。 


<article class="fin"> 
<hl class="finTit"><strong> 未 来 10 年 ， 苹 果 会 输 给 亚马逊 ? </strong></hl> 
<div class="finCnt" style="font-size: 16px:"> 
<p class="para"><strong> 苹果 </strong></p> | 
<p class="para"> 作为 目前 市 值 最 高 的 公司 苹果 始终 在 向 投资 者 证 明 ， 它 有 能 力 继续 发 展 自己 的 业务 ， | 
即便 是 在 产品 细 分 成 熟 的 时 候 。 当 Mac 销量 增长 放 缓 时 ， 蔷 果 的 增长 是 由 iTunes 和 iPod 推动 的 。 
iPod 之 后 是 iPhone、 苹果 应 用 店 、iPad 、Apple Pay、Apple Watch 、Apple Music 等 等 。</p> 


写 


</div> 
</article> 
本 页 包含 两 个 外 部 样式 表 文 件 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，common.css | 
为 通用 样式 表 ， 重 置 常用 标签 默认 样式 。 具 体 说 明 如 下 。 | 
第 1 步 ， 清 除 所 有 标签 的 间距 、 边 框 。 | 
a img, body, button, div. fieldset, form, h1. h2. h3, h4, h5. h6. html, img, input li, menu., ol, p, textarea, ul { padding: 0; | 
margin: 0: border: 0 } 
第 2 步 ， 清 除 列表 结构 的 项 目 符号 。 


| 
| 

| 

li, ol, ul { list-style: none } | 
| 

第 3 步 ， 统 一 所 有 文本 标签 的 字体 大 小 、 粗 细 等 文本 样式 。 | 
| 

b., em. hl1. h2, h3. h4. h5. h6. i { font-size: lem: font-weight: 400: font-style: normal } | 
| 

第 4 步 , 设计 表单 对 象 的 基本 样式 。 | 
| 

body, button, input, select, textarea { -webkit-text-size-adjust: none: font: 400 14px/1.5 helvetica, verdana. san-serif; 
outline: 0: color: #333 } | 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


button, input[type=button]. input[type=password]. input[type=submit]. input[type=text]. textarea { -webkit-appearance: | 
Done } 


第 5 步 ， 清 除 超 链接 的 下 画 线 样式 。 


a, a:Visited { text-decoration: none: color: #333 } 


第 6 步 ， 设 计 多 媒体 对 象 垂直 居中 。 
.img img. video { vertical-align: middle } 


第 7 步 ,设计 网 页 最 小 宽度 为 320 像素 ,并 居中 显示 。 | 


srs 


人 


第 8 步 ， 清 除 超 链接 被 激活 时 的 轮廓 线 。 


T 
| 
| 
| 
| body { min-width: 320px: margin: 0 auto: background: #fff } 
| 
| 
| 
| aactive { outline: nonelimportant } 

| 


‘Note 第 9 步 ， 在 main.css 样式 表 文 件 中 ， 定 义 新 闻 正 文 的 样式 。 
| 语文 章 框 样式 : 增加 边沿 空 际 */ 
| fin { padding: 15px 10px } 
| 语文 章 标题 样式 : 增 大 字号 显示 ， 增 大 行距 */ 
| finTit { font-size: 22px; line-height: 30px } 
| 启 文 章 正 文 样式 : 字体 16 像素 ,间距 10 像素 ,允许 换行 显示 ， 加 上 边框 线 */ 
| 
| 


finCnt { font-size: 16px: padding: 10px 0: word-break: break-all; border-top: 1px solid #efefef } 

族 段 落 文本 样式 : 首 行 缩 进 32 像素 ,设置 字体 、 行 高 、 颜 色 等 基本 样式 */ 

‘finCnt .para { text-indent: 32px; margin-bottom: SpX: text-align: justify; line-height: 1.5em; color: #333; font-family: 
“Microsoft YaHei", “Microsoft JhengHei", STHeiti, MingLiu } 


5.8.2 ”设计 正文 内 页 


| 
| 本 例 模拟 新 华 网 移动 版 的 文本 新 闻 网 页 ， 效果 如 图 5.49 所 示 。 在 网 页 中 单 击 A+ 超 链 接 ， 可 以 将 文本 
| 新 闻 的 文字 大 小 设置 为 24px， 单 击 A- 超 链 接 ， 可 以 将 文本 新 闻 的 文字 大 小 重新 设置 为 16px， 即 该 网 页 中 
| 文本 新 闻 的 文字 大 小 可 以 在 24px 和 16px 之 间 进行 动态 切换 。 


发 展 信息 经 济 促进 社会 转型 
来 源 : 2018 年 06 月 086 14:06:00 
阅读 全 文 A-A+ 
信息 经 济 及 其 重要 特征 
信息 经 济 是 指 由 信息 技术 及 其 网 络 向 经 济 、 社 
| 会、 生活 各 领域 渗透 形成 的 以 信息 产业 为 主导 ， 以 信 


息 产品 生产 和 信息 服务 为 主体 的 新 经 济 模式 。 它 包括 
集成 电路 、 电 子 元 件 、 通 信 、 计 算 机 以 及 信息 感 测 设 


服务 "~、 "制造 即 服务 ~“ 应 用 即 服务 "。 

必须 实现 三 个 创新 

信息 经 济 要 全 面 发 展 ， 必 须 重 视 三 个 方面 的 创 
新 。 第 一 是 理论 要 创新 。 要 努力 突破 传统 工业 经 济 理 
论 ,在 信息 生产 力 基础 上 构建 信息 时 代 均 街 发 展 的 新 


如 局 加 


图 5.49 设计 文本 新 闻 页 面 


| 新 华 网 移动 版 的 文本 新 闻 网 页 的 主体 结构 为 上 、 中 、 下 结构 。 顶 部 内 容 包 括 返 回首 页 超 链接 和 标题 文 
| 字 ， 中 部 内 容 包 括 文本 新 闻 的 标题 、 来 源 和 正文 ， 底 部 内 容 包 括 多 个 超 链接 和 版 权 信 息 。 


188% 
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页 面 顶部 结构 使 用 <header> 标签 实现 ， 中 部 结构 使 用 <article> 标签 实现 ， 底 部 结构 使 用 <footer> 标签 | 
实现 。 主 体 结构 如 下 。 | 


| 
| 
<div id="mainhtml" class="item"> | » 


<header id="header"> </header> 2 
<!-- 正文 -> | 
<article id="mainbox"> Note 


<section class="news-content" id="newsDetail"> </section> 
<div id="ydstart" class="ydstart"> </div> 
<div id="contentblock"> </div> 
<div id="contont"> </div> 
</article> 
</div> 
<footer> 
<nav> </nav> 
<div class="copyright"> </div> | 
</footer> | 
| 

在 <article id="mainbox"> 容器 中 ， 包 含 了 一 个 完整 的 正文 内 容 。 使 用 <section class="news-content" 
id="newsDetail"> 定义 新 闻 标 题 ， 其 中 包括 新 闻 标 题 ， 以 及 描述 信息 ; 使 用 <div id="ydstart" class="ydstart"> | 
包含 附加 工具 条 ， 可 以 单 击 查看 全 文 ， 以 及 放大 或 缩小 正文 字体 。 

正文 内 容 包 庄 在 <div id="contentblock"> 容器 中 ， 内 部 又 嵌入 了 一 层 <div id="content"> 结构 ， 以 便于 
页 面 设 计 。 里 面包 含 多 段 段 落 文本 。 

本 页 包含 两 个 外 部 样式 表 文件 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，common.css 
为 通用 样式 表 ， 重 置 常 用 标签 默认 样式 ， 与 上 一 节 相 同 ， 就 不 再 重复 说 明 。 下 面 重点 介绍 正文 CSS 样式 的 | 
设计 。 | 

在 main.css 样式 表 文件 中 ， 找 到 下 面 的 CSS 代码 。 该 样式 主要 定义 字体 大 小 为 16 像素 ， 正 文 行 高 为 
1.8 倍 字 体 大 小 ， 首 行 缩 进 两 个 字符 ， 通 过 margin 属性 调整 左右 两 侧 的 空 队 。 


#contentblock { 
font-size: 16px: 
line-height: 180%:; 
margin: 10px auto 20px: 
text-align: left: 
width: 99%:; 
text-indent: 2em: 


5.8.3 设计 列表 文本 样式 


本 例 模拟 新 华 网 手机 版 的 新 闻 标 题 及 导航 网 页 ， 效 果 如 图 5.50 所 示 。 在 新 闻 标 题 及 导航 网 页 中 单 击 | 
“显示 更 多 ” 超 链 接 ， 可 以 显示 更 多 的 新 闻 标题 。 | 
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a Hes 和 ai 并 友人 入 门 到 精通 (散人 村 辣 折 ) 


05-08 1406 发 展 信息 经 济 促进 社会 转型 
05-08 1049 平板 电脑 设计 进化 史 : 从 板 砖 变 刀 
锋 


新 华 信息 化 ccz7 11 张 图 为 你 还 原 的 甲骨 文 CEO 


05-08 14:06 ”发 展 信息 经 济 促进 社会 转型 05-08 0940 小 米 推 糖果 色 红 米 手机 被 指 用 多 彩 
ooa 1049 平板 电脑 设计 进化 史 : 从 板 夸 变 刀 时 这 全 
| 锋 ozca 0911 大 电量 加 省 电 技术 长 续航 手机 汇总 
| 05-08 1027 11 张 图 为 你 还 原 的 甲骨 文 CEO 05-08 0911 视觉 效果 出 色 双 镜面 设计 手机 一 览 
| 
| 显示 更 多 065-0711:36 三 星 GALAXY 55 无 线 充电 官方 /三 方 
| 一 一 - 品牌 共存 
| PC 版 简 版 版 
| | | cL 
| 导航 | 联系 我 们 示 屏 
| Copyright © 2018 XINHUANET 06-071136 索尼 T3W 头 戴 显 示 器 ; 佩戴 感 不 佳 / 
初始 效果 显示 更 多 新 闻 列 表 


| 
| 
| 图 5.50 设计 列表 文本 样式 
| 


| 本 例 通过 对 新 闻 标 题 导航 文本 的 设计 ， 重 点 训练 HTML5 中 常用 的 文本 标签 、CSS 文本 属性 、 字 体 属 
| 性 、 颜 色 值 及 颜色 表示 方法 、CSS 链接 属性 等 ， 了 解 网 页 元 素 的 水 平 对 齐 、CSS 导航 栏 的 设计 ， 熟 悉 文 本 
| 新 闻 网 页 和 导航 网 页 的 设计 方法 。 对 于 页 面 其 他 样式 和 功能 的 设计 ， 限 于 篇 幅 就 不 再 展开 ， 感 兴趣 的 读者 
| 可 以 参考 示例 源 代码 

| 页 面 主体 为 上 、 中 、 下 结构 。 顶 部 内 容 包括 返回 首页 超 链接 和 标题 文字 ， 中 部 内 容 包括 新 闻 标 题 和 发 
| 布 时 间 ， 底 部 内 容 包括 多 个 超 链接 和 版 权 信息 

| 页 面 顶部 结构 使 用 <header> 标签 实现 ， 中 部 结构 使 用 <section> 标签 实现 ， 底 部 结构 使 用 <nav> 标签 
| 实现 。 主 体 结构 如 下 


| <div id="mainpage"> 

| <!-- 新 闻 标题 -> 

| <header class="h"> </header> 

| <!-- 新 闻 频道 -> 

| <section class="1s"> </section> 

| <section class="ls" style=" display:none"> </section> 

| <section class="ls" style=" display:none"> </section> 

| <div class="list more" id="showmoren"> </div> 

| <!-- 页 尾 信息 --> 

| <nav class="footbox"> </nav> 

| <!-- footbox end --> 

| </div> 

| 

| 本 页 包含 两 个 外 部 样式 表 文 件 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，common.css 
| 为 通用 样式 表 ， 重 置 常用 标签 默认 样式 ， 与 上 一 节 相 同 ， 就 不 再 重复 说 明 。 下 面 重点 介绍 新 闻 标题 文本 的 
| CSS 样式 的 设计 。 

| 在 main.css 样式 表 文 件 中 ， 找 到 下 面 的 CSS 代码 ， 然 后 分 析 列 表 文 本 的 样式 设计 。 

| 第 1 步 ， 统 一 列表 框 包含 文本 的 字体 大 小 。 


.140 。 


第 5D 章 姜 化 页 面 支 杰 mR 


-list { font-size: 18px: display: -webkit-box: float: left: width: 100% } 

第 2 步 ， 清 除 最 后 一 个 列表 框 的 底 边框 。 

.list:last-child { border-bottom: none } 

第 3 步 ， 定义 当 标 题 文 本 被 访问 后 的 字体 颜色 

.list a:visited { color: #551a8b } 

第 4 步 ， 设计 列表 框 居中 显示 

list ul { width: 100%; margin: 0 auto: text-align: center } 

第 5 步 , 设计 新 闻 时 间 文 本 的 样式 : 大 小 为 14 像素 ， 灰 色 字体 ， 左 对 齐 


list li span { float: left: font-size: 14px: width: 90px: line-height: 27px: color #999999: text-align: left } 


加 下 边框 线 ， 灰 色 虚 


.list li { float: left; -webkit-box-flex: 1; text-align: left: border-bottom: 1px dashed #d6d6d6: display: block: padding: 8px: 
width: 100% } 


第 7 步调 整 链接 文本 与 左 侧 时 间 文 本 的 距离 ， 并 定义 左 对 齐 


第 6 步 , 设计 新 闻 标 题 向 左 浮动 显示 ， 文 本 左 对 齐 ， 


.list li a { text-align: left: padding-right: 10px: } 


5.8.4 ”设计 黑 科技 首页 


本 书 示例 将 模拟 一 个 黑 科 技 网 站 的 首页 ， 借 助 text-shadow 属性 设计 阴影 效果 ， 通 X 
-种 静 说 而 又 神秘 的 画面 ， 使 用 两 幅 PNG 图 像 对 页 面 效 果 进 行 装饰 和 点 级 ， 最 后 演示 效果 如 图 5.51 所 示 
具体 代码 解析 请 扫 码 学 习 


线 上 阅读 


员 色 的 搭配 ， 设 计 


Oo. ewenesmom - 301s 


图 5.51 设计 黑 科 技 首页 
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a 人 ci 关 和 xik 开 故人 和 站 到 精通 (入 训 靖 确 且 ) 


5.8.5 设计 消息 提示 框 


本 节 示 例 将 借助 CSS3 增强 的 文本 特性 ， 以 及 相关 动画 功能 ， 设 计 一 个 纯 CSS 的 消息 提示 框 ， 效 果 如 
图 5.52 所 示 。 具 体操 作 步 又 请 扫 码 学 习 。 


Note 


© 5 ET 


右 侧 清 惫 提示 柜 
class="bubble bubble right” 


图 5.52 设计 消息 提示 框 


5.9 ”在 线 练习 


线 练习 
本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 CSS3 灵活 定义 移动 网 页 文本 样式 和 版 式 。 
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第 章 


设计 列表 结构 


( 鳃 a 视频 讲解 : 52 分 钟 ) 


在 网 页 中 ， 大 部 分 信息 都 需要 列表 结构 来 进行 管理 ， 如 菜单 栏 、 图 文 列 表 、 分 类 
导航 、 列 表 页 、 栏 目 列表 等 。HIMLS 定义 了 一 得 列表 元 素 ， 通 过 列表 结构 实现 对 网 页 
信息 的 合理 排版 。 另 外 ， 列 表 中 还 会 包含 大 量 链接 ， 通 过 它 实现 页 面 或 位 置 跳 转 ， 最 终 
把 整个 网 站 、 整 个 互联 网 连 在 一 起 。 列 表 结构 与 链接 关系 紧密 ， 因 此 本 章 将 详细 讲解 这 
两 类 对 象 的 定义 和 设计 。 


【学 习 重 点 】 

PI 创建 有 序列 表 和 无 序列 表 。 
WI 设置 列表 编号 。 

P| 定义 列表 样式 。 

了 定义 网 页 链接 。 

了 定义 锚 链 接 。 

P| 定义 其 他 类 型 链接 。 


HI7mcs 入 wit 开发 愉 入 门 到 精通 ( 微 裸 精 编 版 ) 


| 6.1 定义 列表 


Note | HTMLS5 支持 创建 普通 列表 、 编 号 列表 ， 以 及 描述 列表 等 ， 可 以 在 一 个 列表 中 识 套 另外 一 个 或 多 个 列 
| 表 。 下 面 就 来 详细 介绍 。 


6.1.1 无 序列 表 
| 
| 无 让 列表 是 -种 不 分 排序 的 列表 结构 ， 使 用 也 元 素 定 义 ， 在 也 元 素 中 可 以 包含 多 个 下 元 素 定义 的 列表 项 目 。 
【示例 1】 下面 的 示例 使 用 无 序列 表 定义 一 元 二 次 方程 的 求解 方法 ， 预 览 效果 如 图 6.1 所 示 。 


| <hl> 解 一 元 二 次 方程 <hl> 

| <p> 一 元 二 次 方程 求解 有 四 种 方法 : </p> 
| <ul> 

| <li> 直接 开平 方法 </li> 

| <li> 配方 法 </li> 

| <li> 公式 法 </l 记 
| 

| 

| 

| 

| 

| 


<li> 分 解 因 式 法 </li> 
</ul> 


无 序列 表 可 以 分 为 一 级 无 序列 表 和 多 级 无 序列 表 ， 一 级 无 序列 表 在 浏览 器 中 解析 后 ， 会 在 每 个 列表 项 
| 目前 面 添加 一 个 小 黑 点 的 修饰 符 ， 而 多 级 无 序列 表 则 会 根据 级 数 调整 列表 项 目 修 饰 符 。 
| 【示例 2】 下 面 的 示例 在 页 面 中 设计 了 三 层 嵌 套 的 多 级 列表 结构 ， 浏 览 器 默认 解析 时 显示 效果 如 图 6.2 所 示 。 
| <u> 
| <li> 一 级 列表 项 目 1 
| <u> 
| <li> 二 级 列表 项 目 1</li> 
| <li> 二 级 列表 项 目 2 
| <u> 
| <li> 三 级 列表 项 目 1</li> 
| <li> 三 级 列表 项 目 2</li> 
| 
| 
| 


</> 
<li> 一 级 列表 项 目 2</li> 


二 EET] 


"| 各 列 到 
| 三 级 列表 项 目 2 
-| 各 列表 项 目 2 


图 6.1 定义 无 序列 表 图 6.2 多 级 无 序列 表 的 默认 解析 效果 
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通过 观察 图 62， 可 以 发 现 无 序列 表 在 吝 套 结构 中 随 着 其 所 包含 的 列表 级 数 的 增加 而 逐渐 缩 进 ， 并 且 随 | 
着 列表 级 数 的 增加 而 改变 不 同 的 修饰 符 。 合 理 使 用 列表 结构 能 让 页 面 的 结构 更 加 清晰 。 


6.1.2 ”有 序列 表 


有 序列 表 是 一 种 在 意 排序 位 置 的 列表 结构 ， 使 用 ol 元 素 定义 ， 其 中 包含 多 个 列表 项 目 元 素 构 成 。 | 

一 般 网 页 设计 中 ,列表 结 构 可 以 互 用 有 序 或 无 序列 表 元 素 。 但 是 ， 在 强调 项 目 排序 的 栏目 中 ,选用 有 | 
序列 表 会 更 科学 ， 如 新 闻 列表 ( 根据 新 闻 时 间 排 序 )、 排 行 榜 ( 强调 项 目的 名 次 ) 等 。 

【示例 1】 列表 结构 在 网 页 中 比较 常见 ， 其 应 用 范畴 比较 宽泛 ， 可 以 是 新 闻 列 表 、 产 品 列表 ， 也 可 以 是 | 
导航 、 菜 单 、 图 表 等 。 下 面 的 示例 显示 了 3 种 列表 应 用 形式 ， 效 果 如 图 6.3 所 示 。 


<hl> 列表 应 用 </hl> 
<h2> 百度 互联 网 新 闻 分 类 列表 </h2> 
<ol> 
<li> 网 友 热 论 网 络 文学 : 渐 人 主流 还 是 刹那 流星 ? </li> 
<li> 电信 封杀 路 由 器 ? 消费 者 质疑 : 强迫 交易 </li> 
<li> 大 学 生 创业 俱乐部 为 大 学 生 自主 创业 助力 <li> 
</ol> 
<h2> 焊 机 产品 型 号 列表 </h2> 
<Ul> 
<li> 直流 氨 弧 焊 机 系列 </li> 
<li> 空气 等 离子 切割 机 系列 </li> 
<li> 氯 焊 / 手 弧 /切割 三 用 机 系列 </li> 
</ul> 
<h2> 站 点 导航 菜单 列表 </h2> 
< 
<li> 微 博 </i> 
<l 记 社区 </l> 
<li> 新 闻 </l> 
</ul> 


【示例 2】 有 序列 表 也 可 分 为 一 级 有 序列 表 和 多 级 有 序列 表 ， 浏 览 器 默认 解析 时 都 是 将 有 序列 表 以 阿拉 
伯 数 字 表 示 ， 并 增加 缩 进 ， 如 图 6.4 所 示 。 


<oP> 
<Li> 一 级 列表 项 目 1 
<oP> 
<li> 二 级 列表 项 目 1</li> 
<li> 二 级 列表 项 目 2 
<ol> 
<li> 三 级 列表 项 目 1</> 
<li> 三 级 列表 项 目 2</i> 
</ol> 
</li> 
</ol> 
</> 
<li> 一 级 列表 项 目 2</li> 


</ol> 


Er 
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百度 互联 网 新 闻 分 类 列表 


网友 执 论 网 络 文 学 A 
二 电信 来 坟 电 六 请 费 吾 店 政 : 强 这 
三 和 和 全 和 


焊 机 产品 型 号 列表 
直流 入 了 二 机 系列 


* 空气 等 高 了 切 剖 机 辫 列 
， 氢 燥 / 手 弧 / 切 天 三 用 机 系列 


站 点 导航 菜单 列表 


ol 元 素 包含 3 个 比较 实用 的 属性 ， 
| 说 明 如 表 6.1 所 示 。 上 i 元 素 也 包含 两 个 实用 属性 type 和 value， 其 中 value 可 以 设置 项 目 编号 的 值 。 


表 6.1 ol 元 素 属性 


表 结 构 。 


| 列表 项 目 会 相应 地 重新 编号 。 因 此 ， 
| 指定 两 个 或 两 个 以 上 位 置 相同 的 编号 。 
通常 该 列表 会 显示 为 1、2、3、4、5， 


,Value="4">， 这 时 列表 将 显示 为 1、2、 


| <hl> 排行 榜 </h1> 
<o> 


<li> 李 四 <span>98</span> </li> 


<li> 侯 七 <span>94</span> </li> 
</ol> 


【示例 】 新 建 HTML5 文档 ,输入 下 面 的 代码 ,设计 一 个 有 序列 


使 用 value 属性 可 以 对 某 个 列表 项 目的 编号 进行 修改 ， 后续 的 


| 则 可 以 将 第 三 个 项 目 设置 为 <li value="2">， 将 第 四 个 项 目 设置 为 <li 


© Er EL 


1. 一 级 列表 项 目 1 
1. 二 级 列表 项 目 1 
2. 二 级 列表 项 目 2 
1. 三 级 列表 项 目 1 
2. 三 级 列表 项 目 2 
2 一 级 列表 项 目 2 


图 6.4 多 级 有 序列 表 默 认 解 析 效 果 


这 些 属性 同时 获得 HTMLS5 支持 ， 且 其 中 reversed 为 新 增 属性 。 具 体 


ES hapyocahosney ~ 8 © | B locahost 


可 以 使 用 value 在 有 序列 表 中 
例如 ， 在 分 数 排名 的 列表 中 ， 
但 如 果 存 在 两 个 并 列 第 二 名 ， 


2、4、5。 效果 如 图 6.5 所 示 。 ”图 6.5 排名 列表 中 并 列 排名 的 效果 


| <li> 张 三 <span>100</span> </li> 


<livalue="2"> 王 五 <span>98</span> </li> 
<li value="4"> 赵 六 <span>96.5</span> </li> 
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次 提示 :start 和 type 是 两 个 重要 的 属性 ， 建 议 始终 使 用 数字 。 即 便 使 用 字母 或 罗马 数字 对 列表 进行 编号 ， 
也 应 使 用 数字 ， 因 为 这 对 于 用 户 和 搜索 引擎 都 比较 友好 。 页 面 呈 现 效果 可 以 通过 CSS 设计 预期 | 


的 标记 样式 。 


下 面 的 代码 设计 了 有 序列 表 降 序 显示 ,序列 的 起 始 值 为 5， 类 型 为 大 写 罗 马 数字 。 
<ol type="I" start="5" reversed > 


6.1.4 设计 CSS 样式 


用 户 也 可 以 使 用 CSS 设计 列表 样式 ,通过 背景 图 像 创建 自 定义 的 项 目 符号 类 型 。 
第 1 步 ， 在 目标 列表 或 列表 项 的 样式 规则 中 ,输入 下 面 的 样式 取消 默认 的 项 目 符号 。 


list-style: none; 


第 2 步 ， 在 目标 列表 的 样式 中 ,设置 margin-left 或 padding-left 属性 ， 指 定 列表 项 目 缩 进 的 大 小 。 


在 不 同 的 浏览 器 上 实现 相似 的 效果 ， 通 常 需要 同时 设置 这 两 个 属性 。 


注意 ， 如 果 为 内 容 设置 了 dir='rtl"， 那 么 就 应 该 设置 margin-right 和 padding-right 属性 。 


第 3 步 ， 在 目标 列表 的 下 元 素 的 样式 中 定义 背景 图 像 ， 使 用 背景 图 像 模拟 项 目 符号 。 


background: url(image.gif ) repeat-type horizontal Vertical: 


其 中 ，image.gif 是 要 作为 定制 标记 的 图 像 的 路 径 和 文件 名 ; repeat-type 是 no-repeat、repeat-x 和 repeaty 


中 的 一 种 ， 通 常设 为 no-repeat; horizontal 和 vertical 值 表示 列表 项 目 中 背景 图 像 的 位 置 。 


第 4 步 ， 输入 padding-left:value ;， 这 里 的 value 应 不 小 于 背景 图 像 的 宽度 ， 以 防 列表 项 目 的 内 容 各 六 到 | 


定制 标记 的 上 面 。 
完整 样式 代码 如 下 : 
岂 { 取消 默认 标记 六 
list-style: none: 
族 删除 列表 项 的 缩 进 */ 
margin-left: 0: 
padding-left: 0: 


} 
{显示 定制 的 标记 */ 
background: url(images/checkmark.png) no-repeat 0 0: 


如 果 想 删除 列表 项 目的 缩 进 ， 应 该 将 margin-left 和 padding-lef 都 设 为 0。 


党 提示 : 也 可 以 使 用 list-style-image 设计 项 目 符号 。 例 如 : 
li { list-style-image:url(image.png); } 
因为 不 同 浏览 器 的 显示 效果 并 不 一 致 ， 并 且 相 比 前 面 展示 的 背景 图 像 方法 ， 
像 标记 的 位 置 。 


“las 


开发 者 更 难 控制 图 


为 了 | 
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| 6. 1.5“” 藤 套 列表 


嵌 套 列表 比较 常用 。 所 谓 嵌 套 列 表 ， 就 是 在 一 个 列表 中 可 以 插入 另 一 个 列表 。 

有 序列 表 和 无 序列 表 都 可 以 创建 嵌 套 列表 。 例 如 ， 使 用 有 序列 表 结 构 进行 嵌 套 ,创建 分 级 大 纲 ( 如 目 
a ); 使 用 无 序列 表 结 构 创建 带子 菜单 的 导航 ( 如 多 级 菜单 )。 

注意 ， 每 个 典 套 的 岂 都 包含 在 其 父 元 素 的 开始 标签 <li> 和 结束 标签 <li> 之 间 。 

【示例 】 新 建 HTMLS5 文档 ， 使 用 无 序列 表 构建 导航 菜单 ( <ul class="nav"> )， 同 时 使 用 两 个 说 套 的 无 序 
| 列表 构建 于 麻生 ( <ul class="subnav"> )。 


<nav role="navigation"> 
<ul class="nav"> 
<li><a hre 伍 "#"> 首页 </a></li> 
<li><a hre 伍 "#"> 产品 </a> 
<ul class="subnav"> 
<li><a href="#"> 手机 </a></li> 
<li><a hre 伍 "#"> 配件 </a></li> 
<hln> 
</i> 
<li><a href="#"> 支持 </a> 
<ul class="subnav"> 
<li><a href="#"> 社区 </a></li> 
<li><a href="#"> 联系 </a></li> 
</l> 
</> 
<li><a hre 伍 "#"> 关于 </a></li> 
</ul> 


ww 局 可 以 通过 CSS 让 导航 水 平 排列 ， 同 时 让 子 菜单 在 默认 情况 下 隐藏 起 来 ， 并 在 访问 者 激活 它们 时 显 


6 1.6 描述 列表 


HTML 提供 了 专门 用 于 描述 成 组 的 名 称 或 术语 ， 及 其 值 之 间 关 联 的 列表 类 型 。 这 种 类 型 在 HTML5 中 
条 为 下 列表， 在 HIML4 中 称 为 定义 列表 。 
描述 列表 是 一 种 特殊 的 列表 结构 ， 它 可 以 是 术语 和 定义 、 元 数据 主题 和 值 、 问 题 和 答案 ， 以 及 任何 其 


| 他 的 名 / 值 对 。 每 个 描述 列表 都 包含 在 dl 元 素 中， 其 中 每 个 名 / 值 对 都 有 一 个 或 多 个 dt 元 素 ( 名 称 或 术语 )， 


| 以 及 一 个 或 多 个 dd 元 素 ( 值 )。 


【示例 1】 下 面 的 示例 定义 了 一 个 中 药 词 条 列表 。 


<h2> 中 药 词 条 列表 </h2> 
<dl> 

<df> 丹 皮 </de> 

<dd> 为 毛 萌 科 多 年 生 落 叶 小 灌木 植物 牡丹 的 根 皮 。 产 于 安徽 、 山 东 等 地 。 秋 季 采 收 ， 晒 干 。 生 用 或 炒 用 。</dd> 
</dl> 


在 上 面 结构 中 ,“ 丹 皮 ” 是 词 条 ， 而 “为 毛 黄 科 多 年 生 落 叶 小 灌木 植物 牡丹 的 根 皮 。 产 于 安徽 、 山 东 等 
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地 。 秋 季 采 收 ， 晒 干 。 生 用 或 炒 用 。” 是 对 词 条 进行 的 描述 ( 或 解释 )。 


【示例 2】 下 面 的 示例 使 有 


<hl> 成 语词 条 列表 </h1> 
<dl> 


描述 列表 显示 了 两 个 成 语 的 解释 。 


<dt> 知 无 不 言 ， 言 无 不 尽 </d> 

<dd> 知道 的 就 说 ， 要 说 就 毫 无 保留 。</dd> 

<dt> 智者 千 虑 ， 必 有 一 失 </de> 

<dd> 不 管 多 聪明 的 人 ， 在 很 多 次 的 考虑 中 ， 也 一 定 会 出 现 个 别 错误 。</dd> 


</d> 


将 提示 :描述 列表 与 无 序列 表 和 有 序列 表 存 在 着 结构 上 的 差异 性 ， 相 同 点 就 是 HTML 结构 必须 是 如 下 形式 : 


<dl> 


<dt> 描述 列表 标题 <dt> 
<dd> 描述 列表 内 容 </dd> 


</d> 
或 者 : 
<dl> 


<dt> 描述 列表 标题 1</df> 
<dd> 描述 列表 内 容 1.1</dd> 
<dd> 描述 列表 内 容 1.2</dd> 


</d> 


也 可 以 是 多 个 组 合 形式 : 


<dl> 


<de> 描述 列表 标题 1</dt> 
<dd> 描述 列表 内 容 1</dd> 
<dt> 描述 列表 标题 2</dt> 
<dd> 描述 列表 内 容 2</dd> 


</d> 


【示例 3】 可 以 对 描述 列表 进行 嵌 套 ， 并 通过 CSS 对 它们 添加 所 需 的 样式 。 
嵌 套 在 男 一 个 d 中 ， 它 会 自动 进行 缩 进 ， 当 然 也 可 以 通过 CSS 对 此 进行 修改 。 


<hl> 标题 说 明 </h1l> 
<dl> 
<df> 名 词 1</d> 
<dd> 解释 1</dd> 
<dd> 


<!-- 开始 典 套 列表 -> 


<d> 


<d> 子 名 词 1</dt> 
<dd> 子 解释 1</dd> 


</d> 


<!-- 结束 嵌 套 列表 -> 


</dd> 
<d> 
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输入 下 面 的 CSS 控制 样式 : 


<style type="text/css"> 
body { font-family: Verdana. Geneva. sans-serif: } 
hl { font-size: 1.75em: } 
df 
Note | font-weight: bold: 
text-transform: uppercase; 


| 

| } 

| 谍 为 位 于 另 一 个 纪 中 的 任意 纠 的 dt 设置 样式 */ 

| dl dl dt { text-transform: none: } 

| dd + dt { margin-top: lem: } 

| </style> 

对 主要 列表 中 的 术语 和 角 套 列表 中 的 术语 进行 区 分 ， 对 dt 元 素 使 用 了 大 写字 母 样式 ， 再 将 位 于 幅 套 dl 
| 中 的 dt 元素 重新 设 为 常规 样式 ( 使 用 text-transform: none; 声明 )。 不 过 ,注意 所 有 的 术语 均 以 粗 体 显示 ， 这 

| | 是 因为 第 一 条 样式 规则 中 的 声明 适用 于 所 有 的 dt 元 素 ， 同 时 并 未 在 嵌 套 列表 的 样式 中 清除 这 一 样式 ， 演 示 

| 效果 如 图 6.6 所 示 。 


0- Bate ao] Bienes | 


图 6.6 设计 巾 套 描述 列表 


| 
| 
| 
| 
| 
| 在 默认 情况 下 ， 当 一 个 dl 嵌 套 在 另 一 个 dl 中 时 ， 赃 套 的 列表 会 自动 进行 缩 进 。 第 一 级 下 元素 使 用 大 
写字 母 ， 而 嵌 套 列表 中 的 dt 元 素 则 使 用 常规 样式 。 所 有 的 dt 元 素 均 以 粗 体 显示 。 

对 于 描述 ( 值 )， 浏 览 器 通常 会 在 其 术语 (名称 ) 下 面 新 的 一 行 对 其 进行 缩 进 。 可 以 通过 自 定 义 dd 元 
| 素 的 margin-left 值 改变 缩 进 。 如 dd { marginlefr0; } 会 将 描述 跟 术语 左 对 齐 。 

| 注意 ,不 应 使 用 p 元 素 对 dd 元 素 中 的 单个 文本 段落 进行 标记 。 不 过 ， 如 果 单 个 描述 是 由 一 个 以 上 的 段 
| 落 构 成 的 ， 就 应 该 在 一 个 dd 元 素 中 使 用 多 个 p 元 素 对 其 进行 标记 ， 而 不 是 将 每 个 段落 ( 不 使 用 p 元 素 ) 放 
| 人 单独 的 dd。 


BB 1.7 菜单 列表 


HTMLS5 重新 定义 了 被 HIML4 弃 用 的 menu 元 素 。 使 用 menu 元 素 可 以 定义 命令 的 列表 或 菜单 ， 如 上 
| 下 文 菜单 、 工 具 栏 ， 以 及 列 出 表单 控件 和 命令 。menu 元 素 中 可 以 包含 command 和 menuitem 元 素 ， 用 于 定 
义 命 


ss 
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【示例 1】 下 面 的 示例 配合 使 用 menu 和 command 元 素 ， 定 义 一 个 命令 ， 当 单 击 该 命令 时 ， 将 弹出 提示 | 
对 话 框 ， 如 图 6.7 所 示 。 


<menu> 
<command onclick="alert(Hello World)"> 命令 </command> 
</menu> 


vote 
command 元 素 可 以 定义 命令 按钮 ， 如 单 选 按钮 、 复 选 框 或 按钮 。 只 有 当 command 元 素 位 于 menu 元 素 | 
内 时 ， 该 元 素 才 是 可 见 的 。 和 否则 不 会 显示 这 个 元 素 ， 但 是 可 以 用 它 定义 键盘 快捷 键 。 | 
目前 ， 只 有 正 9 (更 早 或 更 晚 的 版 本 都 不 支持 ) 和 最 新 版 本 的 Firefox 支持 command 元 素 。 | 
command 元 素 包含 很 多 属性 ， 专 门 用 来 定制 命令 的 显示 样式 和 行为 ， 说 明 如 表 6.2 所 示 。 | 
| 
| 


表 6.2 command 元 素 属性 


属 性 取 值 说 明 

checked checked 定义 是 否 被 选中 。 仅 用 于 radio 或 checkbox 类 型 | 
disabled disabled 定义 command 是 否 可 用 | 
icon ul 定义 作为 command 来 显示 的 图 像 的 ul | 
label text 为 command 定义 可 见 的 label | 
radiogroup groupname 定义 command 所 属 的 组 名 。 仅 在 类 型 为 radio 时 使 用 | 
type checkbox 、command 、radio 定义 该 command 的 类 型 。 默 认 值 为 command | 

| 


【示例 2】 下 面 的 示例 使 用 command 元 素 各 种 属性 定义 一 组 单 选 按钮 命令 组 ， 演 示 效 果 如 图 6.8 所 示 。 
目前 还 没有 浏览 器 完全 支持 这 些 属性 。 


<menu> 
<command icon="images/1.png" onclick="alert(" 男 士 )" type="radio" radiogroup="groupl" label=" 男士 "> 男士 
</command> 
<command icon="images/2.png" onclick="alert(" 女 士 )" type="radio" radiogroup="groupl" label=" 女士 > 女 填 
</command> 
<command icon="images/3.png" onclick="alert(" 未 知 )" type="radio" radiogroup="groupl" label=" 未 知 "> 未 知 
</command> 
</menu> 


https/ocalhoct/testi heml XX httpyiocalhosytsrt2html XX 
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图 6.8 定义 单 选 按钮 命令 组 | 


wl 
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回 label: 定义 菜单 的 可 见 标签 。 
回 type: 定义 要 显示 哪 种 菜单 类 型 ， 取 值 说 明 如 下 。 
> list: 默认 值 ， 定 义 列表 菜单 。 一 个 用 户 可 执行 或 激活 的 命令 列表 (二 元 素 )。 
> ”context: 定义 上 下 文 菜单 。 该 菜单 必须 在 用 户 能 够 与 命令 进行 交互 之 前 被 激活 。 
> ”toolbar: 定义 工具 栏 菜单 。 活 动 式 命令 ， 人 允许 用 户 立 即 与 命令 进行 交互 。 
【示例 3】 下 面 的 示例 使 用 type 属性 定义 了 两 组 工具 条 按钮 ， 演 示 效 果 如 图 6.9 所 示 。 


<menu type="toolbar"> 
<li> 
<menu label="File" type="toolbar"> 
<button type="button" onclick="file_ new0"> 新 建 .</button> 
<button type="button" onclick="file open0"> 打开 ...</button> 
<button type="button" onclick="file_ save0"> 保存 </button> 
</menu> 
</> 
<li> 
<menu label="Edit" type="toolbar"> 
<button type="button" onclick="edit_cut0"> 剪 切 </button> 
<button type="button" onclick="edit_copy0"> 复制 </button> 
<button type="button" onclick="edit paste0"> 粘贴 </button> 
</menu> 
<fi> 
</menu> 


| 
| 
| menu 元 素 也 包含 两 个 专用 属性 ， 简 单 说 明 如 下 。 
| 
| 
| 
| 


图 6.9 定义 工具 条 命令 组 


menuitem 元 素 用 来 定义 菜单 项 目 ， 这 些 菜单 项 目 仅 用 作 弹 出 菜单 的 命令 ,方便 用 户 快捷 调用 。 目 前 ， 


【示例 1】menu 和 menuitem 元 素 一 起 使 用 ,将 把 新 的 菜单 合并 到 本 地 的 上 下 文 菜单 中 。 例 如 ， 给 body 
| 元 素 添加 一 个 “Hello World” 的 菜单 。 

<style type="text/css"> 

html, body { height:100%:} 

| </style> 
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<body contextmenu="new-context-menu"> 
<menu id="new-context-menu" type="context"> 

<menuitem>Hello World</menuitem> 
</menu> 


在 上 面 的 示例 代码 中 ,包含 的 基本 属性 有 id、type 和 contextmenu， 指 定 了 菜单 类 型 是 context， 同时 进 | 
指定 了 新 的 菜单 项 应 该 被 显示 的 区 域 。 在 本 示例 中 ， 当 右 击 鼠标 时 ,新 的 菜单 项 将 出 现在 文档 的 任何 地 方 ， 
效果 如 图 6.10 所 示 。 

【示例 2】 也 可 以 通过 在 特定 的 元 素 上 给 contextmenu 属性 赋值 ， 来 限制 新 菜单 项 的 作用 区 域 。 下 面 的 
示例 将 为 hl 元 素 绑 定 一 个 上 下 文 菜单 。 

<hl contextmenu="new-context-menu"> 使 用 &ltmenuitem&gt: 标签 设计 弹出 菜单 <hl> 

<menu id="new-context-menu" type="context"> 


<menuitem>Hello World</menuitem> 
</menu> 


当 在 Firefox 中 查看 时 ， 会 发 现 新 添加 的 菜单 项 被 添加 到 右键 快捷 菜单 的 最 项 部 。 
【示例 3】 为 快捷 菜单 添加 子 菜单 。 子 菜单 由 一 组 相似 或 相互 的 菜单 项 组 成 。 下 面 的 示例 演示 了 如 何 使 
用 menuitem 添加 4 个 子 菜单 项 ， 演 示 效 果 如 图 6.11 所 示 。 | 


| Note 


| 
<img src="images/1.png" width="500" contextmenu="demo-image" /> | 
<menu id="demo-image" type="context"> | 
<menu label=" 旋转 图 像 "> | 
<menuitem> 旋转 90 度 </menuitem> | 
<menuitem> 旋转 180 度 </menuitem> | 
<menuitem> 水 平 翻转 </menuitem> | 
<menuitem> 垂直 翻转 </menuitem> 
</menu> 
</menu> 


httpy/iocalhostteatlhtml 。 


图 6.10 为 body 元 素 添加 上 下 文 菜单 图 6.11 为 图 片 添加 子 菜单 项 目 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

€ | Iacalhoryeestlhtml 居 本 入 S3).- wm | 
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| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


menuitem 元 素 包含 很 多 属性 ， 具 体 说 明 如 表 6.3 所 示 。 
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表 6.3 menuitem 元 素 属 性 
属 性 值 描 述 
checked checked 定义 在 页 面 加 载 后 选中 命令 / 菜单 项 目 。 仅 适用 于 type="radio" 或 type="checkbox" 
default default 把 命令 /菜单 项 设置 为 默认 命令 
disabled disabled 定义 命令 /菜单 项 应 该 被 禁用 
icon URL 定义 命令 /菜单 项 的 图 标 
open open 定义 details 是 否 可 见 
label text 必需 。 定 义 命令 /菜单 项 的 名 称 ， 以 向 用 户 显示 
| 定义 命令 组 的 名 称 ， 命 令 组 会 在 命令 /菜单 项 本 身 被 切换 时 进行 切换 。 仅 适用 于 
type="radio" 
ye en 定义 命令 /菜单 项 的 类 型 


【示例 4】 下 面 的 示例 使 用 icon 属性 在 菜单 项 的 旁边 添加 图 标 ， 演 示 效 果 如 图 6.12 所 示 。 


<img src="images/1.png" width="500" contextmenu="demo-image" /> 
<menu id="demo-image" type="context"> 
<menu label=" 旋转 图 像 "> 
<menuitem icon="images/icon1.png"> 旋转 90 度 </menuitem> 
<menuitem icon="images/icon2.png"> 旋转 180 度 </menuitem> 
<menuitem icon="images/icon4.png"> 水 平 翻 转 </menuitem> 
<menuitem icon="images/icon3.png"> 垂直 翻转 </menuitem> 
</menu> 
</menu> 
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图 6.12 为 菜单 项 添加 图 标 


注意 ，icon 属性 只 能 在 menuitem 元 素 中 使 用 。 
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6.2 定义 链接 i 


链接 包括 两 部 分 : 链接 目标 和 链接 标签 。 目 标 通过 URL 定义 ， 指 定 访问 者 单 击 链接 时 会 发 生 什么 ， 可 县 & 人 全 
以 创建 链接 进入 另 一 个 页 面 ， 在 页 面 内 跳 转 ， 显 示 图 像 ， 下 载 文件 等 。 标签 就 是 访问 者 在 浏览 名 中 看 到 或 | 
在 屏幕 阅读 器 中 听 到 的 部 分 ， 激 活 标签 就 可 以 到 达 链 接 的 目标 。 


创建 指向 另 一 个 网 页 的 链接 的 方法 如 下 。 
<a href="page.html"> 标签 文本 </a> | 
其 中 ，page.html 是 目标 网 页 的 URL。 标 签 文本 默认 突出 显示 ， 访 问 者 激活 它 时 ， 就 会 转 到 page.html | 
所 指向 的 页 面 。 
也 可 以 添加 一 个 img 元 素 蔡 代 文本 ( 或 同文 本 一 起 ) 作为 标签 ， 例 如 : | 
<a href="page.html “><img SIc="images/1.jpg" /></a> | 
| 
| 
| 


6.2.1 普通 链接 


可 以 创建 指向 另 一 个 网 站 的 页 面 的 链接 ， 例 如 : 
<a href="http://www.w3school.com.cn" rel="external"> W3School</a> 


a 元素 包含 众多 属性 ， 其 中 被 HTMLS5 支持 的 属性 如 表 6.4 所 示 。 


href 指 hypertext reference ( 超 文 本 引用 )。 通常 ， 对 指向 站 内 网 页 的 链接 使 用 相对 URL， 对 指向 其 他 网 | 
站 页 面 的 链接 使 用 绝对 URL。 

仅 指定 路 径 ， 省 略 文件 名 ， 就 可 以 创建 指向 对 应 目录 下 默认 文件 ( 常 为 ndex.html ) 的 链接 ， 例 如 : 

Www.site.com/directory/ 

如 果 连 路 径 也 省 略 ， 就 指向 网 站 的 默认 ( 首 ) 页 ， 例如: 

Www.site.com 


rel 属性 是 可 选 的 ， 即 使 没有 它 ， 链 接 也 能 照常 工作 。 但 对 于 指向 另 一 网 站 的 链接 ， 推 荐 包含 这 个 值 。 


表 6.4 a 元 素 属性 | 

属 性 取 值 说 有明 | 

download filename 规定 被 下 载 的 链接 目标 | 

href URL 规定 链接 指向 的 页 面 的 URL | 

hreflang language_code 规定 被 链接 文档 的 语言 | 
media media_query 规定 被 链接 文档 是 为 何 种 媒介 /设备 优化 的 

Tel text 规定 当前 文档 与 被 链接 文档 之 间 的 关系 | 

target ES 规定 在 何 处 打开 链接 文档 

type MIME type 规定 被 链接 文档 的 的 MIME 类 型 | 

| 

| 

| 

| 

| 

| 

| 

| 
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| 
| 
| 
| 它 描述 包含 链接 的 页 面 和 链接 指向 的 页 面 之 间 的 关系 。 它 也 是 另 一 种 提升 HTML 语义 化 程度 的 方式 。 搜 索 
| 引擎 也 会 利用 这 些 信 息 。 此 外 ， 还 可 以 对 带 有 rel="external" 的 链接 添加 不 同 的 样式 ， 从 而 告知 访问 者 这 是 
| 一 个 指向 外 部 网 站 的 链接 。 
| 访问 者 将 鼠标 移 到 指向 其 他 网 站 的 链接 上 时 ， 目 标 URL 会 出 现在 状态 栏 里 ，title 文字 ( 如 果 指定 了 的 
话 ) 也 会 显示 在 链接 旁边 。 

使 用 target 属性 可 以 设置 打开 目标 页 面 的 窗口 ， 如 target="window"， 其 中 window 是 应 该 显示 相应 页 面 
| 的 窗口 的 名 称 。 例如 : 


<a href="page.html" target="doodad"> 打开 新 页 面 </a> 

| 上面 的 代码 会 在 名 为 doodad 的 新 窗口 或 标签 页 中 打开 pagehtml。 
| 

| 

| 


必 册 


| 


如 果 让 多 个 链接 指向 同一 个 窗口 ( 即使 用 同一 个 名 称 )， 链 接 将 都 在 同一 个 窗口 打开 。 或者， 如 果 和 希 
| 望 链接 总 是 在 不 同 的 窗口 或 标签 页 打开 ( 即使 多 次 激活 同一 个 链接 )， 就 使 用 HTML 预定 义 的 名 称 _blank 
| target="_blank" ), 例如 : 


<a href="page.html" target=”blank"> 打开 新 页 面 </a> 


不 过 不 推荐 这 样 做 ， 尽 量 避 免 。 
target 还 有 一 种 用 法 ， 就 是 在 这 ame 中 打开 链接 。 可 以 用 同样 的 方法 编写 target， 只 是 其 值 应 与 这 ame 
| 的 记 值 对 应 。 


HIML5 允许 在 链接 内 包含 任何 类 型 的 元 素 或 元 素 组 ， 如 段落 、 列 表 、 整 篇 文章 和 区 块 。 任 何 元 素 都 
| 行 ,但 其 他 链接 、 音 频 、 视 频 、 表 单元 素 、iframe 等 交互 式 内 容 除 外 ， 这 些 元 素 大 部 分 为 块 级 元 素 。 使 用 
| HTML 验证 器 对 页 面 进行 测试 可 以 防止 链接 中 出 现 不 允许 包含 的 元 素 。 
| 【示例 】 下 面 的 示例 以 文章 的 一 小 段 内 容 为 链接 ， 指 向 完整 的 文章 。 如 果 想 让 这 一 小 段 内 容 和 提示 都 形 
| 成 指向 完整 文章 页 面 的 链接 ， 就 应 使 用 块 链 接 。 可 以 通过 CSS 让 部 分 文字 显示 下 画 线 ， 或 者 所 有 的 文字 都 
| 不 显示 下 夯 线 。 
<a href="pages.html"> 

<hl> 标题 文本 </hl> 

<p> 段落 文本 </p> 


<p> 更 多 信息 </p> 
</a> 


块 链接 是 HTML5 同 HTML 早期 版 本 有 巨大 差异 的 地 方 。 在 以 前 的 HIML 中 ,链接 中 只 能 包含 图 像 、 
| 文本 短语 ， 以 及 标记 文本 短语 的 元 素 ( 如 em、strong 、cite 等 )。 

尽管 在 以 前 的 HTML 规范 中 块 链接 是 不 允许 的 ,但 浏览 器 都 支持 。 这 意味 着 现在 就 可 以 使 用 它们 ， 而 
| B 它 们 在 旧 的 浏览 器 和 现代 浏览 器 中 均 能 正常 工作 。 不 过 ， 使 用 它们 的 时 候 也 要 小 心 。 有 一 些 可 访问 性 方 
| 面 的 注意 事项 ， 特别 是 涉及 不 同 的 屏幕 阅读 器 如 何 处 理 块 链接 的 问题 。 

一 般 建 议 将 最 相关 的 内 容 放 在 链接 的 开头 ， 而 且 不 要 在 一 个 链接 中 放 和 人 过 多 内 容 。 随 着 屏幕 阅读 器 和 
| 浏览 器 逐渐 开始 官方 支持 块 链接 ， 可 访问 性 问题 可 能 只 是 暂时 的 。 

<a href="pioneer-valley.html"> 
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<hl1> 标题 文本 </h1> 
<img src="images/1.jpg" width="143" height="131" alt="1" > 
<img src=" images/2.jpg" width="202" height="131" alt="2" > 
<p> 段落 文本 </p> 


</a> 


注意 ,不 要 过 度 使 用 块 链接 。 应 该 避免 上 面 演示 的 情况 ， 将 一 大 段 内 容 使 月 


一 个 链接 包 起 来 。 尽 管 这 


样 的 链接 是 有 效 的 ， 但 屏幕 阅读 器 有 可 能 将 所 有 这 些 内 容 多 朗读 一 次 ， 多 计 近 此 内 容 可 能 比 访问 者 本 | 


望 听 到 的 链接 信息 


一 般 来 


说 ， 用 得 最 多 的 还 是 第 一 


以 制作 精巧 的 块 链接 。 


6.2.3 ” 锚 点 链 


\ 要 多 得 多 。 因 此 ， 最 好 仅 将 与 链接 的 含义 密切 相关 的 内 容 放 在 链接 里 。 


个 示例 那样 简单 、 传 统 的 链接 样式 ， 不 过 也 要 知道 ， 


使 用 这 种 方式 可 | 


A 页 面 或 者 其 他 页 面 中 的 特定 位 置 的 链接 。 例 如 ， 在 一 个 很 长 的 页 面 ， ea 
底部 设置 一 个 锚 点 ， 单 击 后 可 以 跳 转 到 页 面 顶部 ， 这 样 避 免 了 上 下 滚动 的 麻烦 。 


MM 在 页 面 内 容 的 标题 上 设置 锚 点 ， 然 后 在 页 面 顶部 设置 锚 点 的 链接 ， 


浏览 具体 内 容 。 


创建 锚 ， 
第 1 步 ， 


指向 该 位 置 
素 内 。 


称 "”， 如 输入 “元 4”。 
可 以 使 用 相对 路 径 。 


点 链接 的 方法 如 下 。 


创建 用 于 链接 的 锚 点 。 
点 的 锚 点 链接 了 。 注 


任何 被 定义 了 ID 值 的 元 素 都 可 以 作为 锚 点 
给 页 面 元 素 的 ID 锚 点 命名 时 不 要 含有 空格 ， 


击 网 页 顶部 的 文本 链接 后 ， 会 跳 转 到 页 面 底部 的 图 片 4 所 在 位 置 
<!doctype html> 


<body> 


<p><a hre 伍 "#p4"> 查看 图 片 4</a> </p> 
<h2> 图 片 1</h2> 
<p><img src="images/1.jpg" /></p> 
<h2> 图 片 2</h2> 
<p><img src="images/2.jpg" /></p> 
<h2> 图 片 3</h2> 
<p><img src="images/3.jpg" /></p> 


<h2 id= 


"p4"> 图 片 4</h2> 


<p><img src="images/4.jpg" /></p> 
<h2> 图 片 5</h2> 

<p><img src="images/$.jpg" /></p> 
<h2> 图 片 6</h2> 

<p><img src="images/6.jpg" /></p> 
</body> 


“ors 


个 页 面 的 不 同位 置 ,效果 如 图 6.13 所 示 ， 当 单 


过 条 和 可 以 通过 链 换 你 束 地 | | 


标记 ， 接 下 来 就 可 以 定义 
同时 不 要 秆 于 绝对 定位 元 | 


第 2 步 ， 在 当前 页 面 或 者 其 他 页 面 不 同位 置 定义 链接 ， 为 a 元素 设置 href 属性 ， 属 性 值 为 “#+ 锚 点 名 | 
如 果 链 接 到 不 同 的 页 面 ， | test 站 则 输入 “test.html#p4”"， 可 以 使 用 绝对 路 径 ， 也 
注意 ， 锚 点 名 称 是 区 分 大 小 写 

【示例 】 下 面 的 示例 定义 了 一 个 锚 点 链接 ， NE 


2 


跳 转 前 跳 转 后 
图 6.13 定义 锚 点 链接 


| 
| 链接 指向 的 目标 对 象 可 以 是 不 同 的 网 页 ， 也 可 以 是 相同 网 页 内 的 不 同位 置 ， 还 可 以 是 一 张 图 片 、 一 个 
| 电子 邮件 地 址 、 一 个 文件 、FTP 服务 器 ， 甚 至 是 一 个 应 用 程序 ， 也 可 以 是 一 段 JavaScript 脚本 。 
| 【示例 1】a 元 素 的 href 属性 指向 链接 的 目标 可 以 是 各 种 类 型 的 文件 。 如 果 是 浏览 器 能 够 识别 的 类 型 ， 
| 会 直接 在 浏览 器 中 显示 ; 如 果 是 浏览 器 不 能 识别 的 类 型 ， 会 弹出 “文件 下 载 ” 对 话 框 ， 允 许 用 户 下 载 到 本 
， 演 示 效 果 如 图 6.14 所 示 

<p><a href="images/1.jpg"> 链接 到 图 片 </a> </p> 

<p><a href="demo.html"> 链接 到 网 页 </a> </p> 

<p><a href="demo.docx"> 链接 到 Word 文档 </a> </p> 


芒 吵 


| 

| 

| i 

| 合 窑 磺 

| 村 demo.docx 执行 什么 皖 作 ? 和 

| 

| 四 保存 (S) 

| 字号 丰 为 0) 

| 

| 图 6.14 下 载 Word 文档 

| 定义 链接 地 址 为 邮箱 地 址 ， 即 为 电子 邮件 ( E-Mail ) 链接 。 通 过 E-Mail 链接 可 以 为 用 户 提供 方便 的 反 
| 馈 与 交流 机 会 。 当 浏览 者 单 击 邮 件 链 接 时 ， 会 自动 打开 客户 端 浏 览 器 默认 的 电子 邮件 处 理 程序 ( 如 Outlook 


| Express )， 收 件 人 邮件 地 址 被 E-Mail 链接 中 指定 的 地 址 自动 更 新 ， 浏 览 者 不 用 手工 输入 。 
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创建 E-Mail 链接 的 方法 如 下 。 

为 a 元 素 设置 href 属性 ， 属 性 值 为 “mailto:+ 电子 邮件 地 址 +?+subject=+ 邮件 主题 "， 其 中 subject 表示 | 
邮件 主题 ， 为 可 选项 ， 例 如 ，mailto:namee(@mysite.cn?subject= 意见 和 建议 。 

【示例 2】 下 面 的 示例 使 用 了 a 元 素 创建 电子 邮件 链接 。 


<a href="mailto:namee@mysite.cn">namee@mysite.cn</a> 


< 所 注意 : 如 果 为 href 属性 设置 “#"， 则 表示 一 个 空 链接 ， 单 击 空 链接 ， 页 面 不 会 发 生变 化 。 
<a href="#"> 空 链接 </a> 
如 果 为 href 属性 设置 JavaScript 脚本 ， 单 击 脚本 链接 ， 将 会 执行 脚本 。 
<a href="javascript:alert(&quot; 谢谢 关注 ， 投 票 已 结束 。&quot:):"> 我 要 投票 </a> 


6.2.5 下 载 链 接 


当 被 链接 的 文件 不 被 浏览 器 解析 时 ， 如 二 进 制 文件 、 压 缩 文件 等 ， 便 被 浏览 器 直接 下 载 到 本 地 计算 Wm 
中 ,这 种 链接 形式 就 是 下 载 链 接 。 

对 于 能 够 被 浏览 器 解析 的 目标 对 象 ， 可 以 使 用 HTMLS5 新 增 属 性 download 强制 浏览 器 执行 下 载 操作 。 

【示例 】 下 面 的 示例 比较 了 链接 使 用 download 和 不 使 用 download 属性 的 区 别 。 


<p><a href="images/1.jpg" download > 下 载 图 片 </a></p> 
<p><a hre 仁 "images/1.jpg" > 浏览 图 片 </a></p> 


当 提示 : 目前 ， 只 有 Firefox 和 Chrome 浏览 器 支持 download 属性 。 


6.2.6 图 像 热 点 


图 像 热 点 就 是 为 图 像 的 局 部 区 域 定义 链接 ， 当 单 击 该 热点 区 域 时 ， 会 触发 链接 ， 并 跳 转 到 其 他 网 页 或 

网 页 的 某 个 位 置 。 
图 像 热 点 是 一 种 特殊 的 链接 形式 ， 常 用 来 在 图 像 中 设置 导航 。 在 一 幅 图 上 定义 多 个 热点 区 域 ， 以 实现 | 

单 击 不 同 的 热 区 链接 到 不 同 页 面 。 | 
定义 图 像 热点 ,需要 map 和 area 元 素 配 合 使 用 。 具 体 说 明 如 下 。 | 

回 map: 定义 热点 区 域 。 包 含 必需 的 id 属 性， 定义 热点 区 域 的 ID， 或 者 定义 可 选 的 name 属性 ， 也 可 | 

以 作为 一 个 句柄 ， 与 热点 图 像 进行 绑 定 。 | 

回 ing 中 的 usemap 属性 可 引用 map 中 的 id 或 name 属性 (根据 浏览 器 )， 所 以 应 同时 向 map 添加 id | 

和 name 属性 ， 且 设置 相同 的 值 。 | 

| 

| 

| 

| 

| 

| 

| 


回 area: 定义 图 像 映射 中 的 区 域 ，area 元 素 必须 腐 套 在 map 元 素 中 。 该 元 素 包含 一 个 必须 设置 的 属性 | 
alt， 定 义 热点 区 域 的 替换 文本 。 该 元 素 还 包含 多 个 可 选 属性 ， 说 明 如 表 6.5 所 示 。 
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Ke 
让 2 
表 6.5 area 元 素 属 性 
属性 取 值 说 明 
coords | 坐标 值 定义 可 点 击 区 域 ( 对 鼠标 敏感 的 区 域 ) 的 坐标 
href URL 定义 此 区 域 的 目标 URL 
| nohref | nohref 从 图 像 映射 排除 某 个 区 域 
| shape | default、rect ( 矩形 )、circ ( 圆 形 )、poly ( 多 边 形 ) 定义 区 域 的 形状 
| aaget | _blank、 parent、 self、_top 规定 在 何 处 打开 href 属性 指定 的 目标 URL 
| 
| 


【示例 】 下 面 的 示例 具体 演示 了 如 何 为 一 幅 图 片 定义 多 个 热点 区 域 ， 演 示 效 果 如 图 6.15 所 示 。 


| <img src="images/bg.jpg" width="1003" height="1053" usemap="#Map" border="0"> 

| <map name="Map" id="Map"> 

<area shape="rect" coords="798.57.894.121" href="http://wo.2126.com/?tmcid=187" target=" blank" alt=" 沃 尔 学 院 
Ws 

<area shape="rect" coords="697,57.793,121" href="http://web.2126.com/ddt/" target="” blank" alt=" 弹 弹 堂 "> 
<area shape="rect" coords="591,57.687,121" href="http://hero.61.com/" target=” blank" alt=" 摩尔 勇士 "> 
<area shape="rect" coords="488,57,584,121" href="http://hua.61.com/" target="” blank" alt=" 小 花 仙 "> 
<area shape="rect" coords="384.57.480.121" href="http://gf.61.com/" target=" blank" alt=" 功夫 派 "> 
<area shape="rect" coords="279,57,375.121" hre 人 ="http://seer2.61.com/" target="” blank" alt=" 赛 尔 号 2"> 
<area shape="rect" coords="69.57.165.121" href="http://v.61.cony" target="” blank" alt=" 淘 米 视频 "> 
<area shape="rect" coords="175,57,271,121" href="http://seer.61.com/" target="” blank" alt=" 赛 尔 号 "> 

| </map> 


(学 泣 洲 网 wn eves OF 


图 6.15 定义 热点 区 域 


WW 


全 提示 : 定义 图 像 热点 ， 建 议 用 户 借助 Dreamweaver 可 视 化 设计 视图 快速 实现 ， 因 为 设置 坐标 是 一 件 费 
| 力 不 讨 好 的 烦琐 工作 ， 可 视 化 操作 如 图 6.16 所 示 。 
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图 6.16 借助 Dreamweaver 快速 定义 热点 区 域 


6.2.7 框架 链接 
HIML5 已 经 不 支持 fameset 框架 了 ， 但 是 它 仍然 支持 这 ame 浮动 框架 的 使 用 。 浮 动 框架 可 以 自由 控制 | 
窗口 大 小 ， 可 以 配合 网 页 布局 在 任何 位 置 插入 窗口 ， 实 际 上 就 是 在 窗口 中 再 创建 一 个 窗口 。 | 
使 用 壕 ame 创建 浮动 框架 的 用 法 如 下 | 
| 
<iframe src="URL"> | 
src 表示 浮动 框架 中 显示 网 页 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 
【示例 】 下 面 的 示例 是 在 浮动 框架 中 链接 到 百度 首页 ， 显 示 效果 如 图 6.17 所 示 
<iframe src="http://www.baidu.com"></iframe> 


x 
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图 6.17 使 用 浮动 框架 


从 图 6.13 可 以 看 到 ， 浮 动 框架 在 页 面 中 又 创建 了 一 个 窗口 。 在 默认 情况 下 ， 浮 动 框架 的 宽度 和 高 度 为 | 


220 像素 x 120 像素 。 如 果 需 要 调整 浮动 框架 的 尺寸 ， 应 该 使 用 CSS 样式 。 | 
过 ame 元 素 包 含 多 个 属性 ， 其 中 被 HTMLS5 支持 或 新 增 的 属性 如 表 6.6 所 示 。 | 


ST 


2 Ne 


表 6.6 iframe 元 素 属性 


属 性 取 值 说 有 明 

frameborder 1.0 规定 是 否 显示 框架 周围 的 边框 
| height pixels、% 规定 这 ame 的 高 度 
| longdesc URL 规定 一 个 页 面 ， 该 页 面包 含 了 有 关 这 ame 的 较 长 描述 
| 
| marginheight pixels 定义 这 ame 的 顶部 和 底部 的 边 距 
| marginwidth pixels 定义 这 ame 的 左 侧 和 右 侧 的 边 距 
| 

name frame_name 规定 这 ame 的 名 称 

allow-forms 
sandbox allow-same-origin 启用 一 系列 对 这 ame 中 内 容 的 额外 限制 


allow-top-navigation 


| 

| 

| 

| 

| 

| 
| allow-scripts 
| 

| 

| 

| 

| 


scrolling yes、 no、auto 规定 是 否 在 iframe 中 显示 滚动 条 

seamless seamless 规定 这 ame 看 上 去 像 是 包含 文档 的 一 部 分 
SIC URL 规定 在 过 ame 中 显示 的 文档 的 URL 

srcdoc HIML code 规定 在 fame 中 显示 的 页 面 的 HTML 内 容 
width pixels 、% 定义 这 ame 的 宽度 


6.3 案例 实战 


下 面 通过 几 个 案例 演示 如 何在 移动 页 面 中 应 用 列表 结构 和 链接 。 


视频 讲解 


6.3.1 设计 导航 页 面 


本 节 示例 设计 一 个 简单 的 手机 搜狐 网 的 名 站 导航 网 页 ， 效 果 如 图 6.18 所 示 。 整 个 页 面 主体 结构 为 上 、 
| 中 、 下 3 部 分 ， 顶 部 为 标题 文本 ， 中 部 包括 多 个 热点 网 站 的 链接 按钮 和 多 行 分 类 网 站 导航 链接 ， 底 部 包括 
| 多 个 导航 链接 和 版 权 信息 。 
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图 6.18 手机 搜狐 网 的 名 站 导航 网 页 效果 


第 1 步 ， 新 建 HIML5 文档 ， 保 存 为 index.html。 首 先 ， 使 用 HIMLS5 元 素 构建 网 页 结构 ， 
如 下 


<header class="hd"> </header> 
<main class="tab-content"> 
<section class="common block famous"> </section> 
<div class="nav-urls"> 
<ul class="urls"></ul> 
<ul class="urls"></ul> 
<ul class="urls"></ul> 
<ul class="urls"> </ul> 
<section class="reTop"> </section> 
<footer class="site"> 
<nav class="foo"> </nav> 
<p class="inf"> </p> 
<p class="cop"> </p> 
</footer> 
</div> 
</main> 


<header class="hd"> 


content"> 作为 整个 页 面 主体 ,包括 了 所 有 的 列表 和 链接 信息 。 


第 2 步 ， 新建 两 个 外 部 样式 表 文件 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，common. | 


css 为 通用 样式 表 ， 重 置 常用 元 素 默 认 样式 。common.css 样式 代码 如 下 。 
证 清 除 所 有 元 素 的 默认 间距 和 边框 */ 


容器 负责 定义 标题 栏 ， 其 中 包括 一 个 标题 文本 和 黑色 框 。<main class="tab- 


html body, menu, UL ol, li. p, div, form, hl. h2. h3. h4. h5. h6, img, a img, input button, textarea { padding: 0; margin: 0; ， 


border: 0} 
html. body { overflow-x: hidden } 上 # 禁 止 显 示 水 平 滚动 条 所 
body { background: #f1ifoed url( *../images/01.jpe") } 广 添 加 网 页 背景 图 */ 


UL ol. li { list-style: none } 
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让 统一 标题 、b、i、em 等 特殊 文本 标识 元 素 样式 */ 

hl1. h2. h3, h4. h5. h6. b. i, em { font-size: lem: font-weight: normal: font-style: normal } 

证 统一 表单 对 象 样式 */ 

body. input, button, textarea, select { font-family: Helvetica: font: normal 14px/1.5 “Arial": color: #333: -webkit-text-size- 
adjust: none } 

input, button, textarea, select { line-height: 1.2: outline: 0: -webkit-border-radius: 0; border-radius: 0 } 

input[type="text"], input[type="password"], input[type="button"], input[type="submit"], button, textarea { -webkit- 
appearance: none } 


a { text-decoration: none: color: #08c } 上 # 统一 链接 文本 样式 */ 
img, video { vertical-align: middle } 广 统 一 多 媒体 对 象 样式 */ 
::-webkit-scrollbar { width: 0} 证 隐 藏 滑 块 */ 


a { color: #333 } 
b { font-size: 1.2em; } 


第 3 步 ， 在 <main class="tab-content"> 主 容 器 内 ， 使 用 <section> 设计 一 个 热点 导航 模块 ， 其 中 包含 一 
| 个 列表 框 ， 包 含 多 个 热点 导航 图 标 和 文字 ， 如 图 6.19 所 示 。 
| 轧 提 邹 图 搜狗 图 百度 
| 斤 新 浪 CL 易 网 易 
| @ 有 叭 品 会 。 | 加 淘宝 
| 
| 图 6.19 热点 导航 版 块 
| 局 部 代码 如 下 。 


<section class="common block famous"> 
<ul pbflag="famous"> 
<lipbtag="1"> <a href="#" class="fsohu"> 搜狐 </a> </li> 


| 

| < 
| </section> 

| 

| 第 4 步 ， 热 点 导航 模块 的 样式 如 下 ， 通 过 .common block 定义 96% 宽度 、 居 中 显示 ， 隐 藏 超出 区 域 ， 
| 这 样 可 以 设计 精致 的 凸 起 版 块 效果 。 通 过 .famous li 选择 器 设计 每 个 列表 项 占 三 分 之 一 的 宽度 ， 浮 动 显示 ， 
| 固定 高 度 35 像素 ,使 用 line-height: 35px; 设计 垂直 居中 ， 添 加 浅 色 底 边框 。 通 过 .famous li a::before 选择 器 ， 
| 为 每 个 列表 项 链接 之 前 添加 一 个 图 标 ， 这 里 利用 CSS Sprites 技术 ( CSS 精灵 )， 即 把 所 有 图 标 拼合 在 一 张 
| 大 图 上 ， 然 后 再 通过 CSS 背景 定位 的 方法 ， 为 每 个 列表 项 目 选 择 要 显示 的 背景 图 标 。 


.famous { border: 0: } 

.common block { margin: 10px auto: width: 96%: overflow: hidden: } 

famous li { width: 33.33%; float: left: height: 35px: line-height: 35px: border-bottom: 1px solid #d6d6d6: background: 
HE } 

.famous li a { display: block: border-right: 1px solid #d6d6d6: height: 100%: padding-left: 46px: position: Telative: } 
-famous li a::before { content: "; position: absolute; width: 16px: height: 16px: top: 50%:; margin-top: -8px; left: 15px; 
background-image: url(../images/websites.png): backeround-repeat: no-repeat: -Webkit-background-size: 16px auto } 

| .famous li:nth-child(3n) a { border-width: 0 } 

| .famous li a.fsohu::before { background-position: 00} 

| .famous li a.fsogou::before { background-position: 0 -220px } 
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.famous li afbaidu::before { background-position: 0 -160px } 
.famous li afsina::before { background-position: 0 -100px } 
-famous li a.fqq::before { background-position: 0 -180px } 
-famous li afl63::before { backeround-position: 0 -200px } 
-famous li afifeng::before { background-position: 0 -20px } 
famous li a.fvip::before { background-position: 0 -240px } 
.famous li a.ftaobao::before { backeround-position: 0 -140px } 


新 闻 人 民 新华 。 央视 

“体育 ”直播 NBA 足球 

' 购 物 “淘宝 京东  ” 唯 品 会 

-音乐 ”百度 栈 狗 栈 我 
图 6.20 普通 文字 导航 版 块 


该 版 块 结构 由 多 个 列表 结构 堆 全 排列， 简单 显示 如 下 


<div class="nav-urls"> 
<ul class="urls"> 


<li class="url sort"><a href="#" class="btn"><b>&middot; 新 闻 </b></a></li> 


<li class="url"> <a href="#" class="btn"><b> 人 民 </b></a> </li> 
</u> 
<ul class="urls"> 
<ul class="urls"> 
<ul class="urls"> 
</div> 


每 行列 表 中 ， 第 一 个 列表 项 目 为 行 标题 ， 后 面 为 具体 导航 列表 项 目 ， 通 过 sort 类 样式 进行 区 分 ,标题 | 


文本 为 灰色 显示 。 


第 6 步 ,“ 返 回 顶 部 ”按钮 作为 独立 的 一 行 ， 显 示 在 普通 文字 导航 版 块 的 下 面 ， 居 中 显示 。 代 码 位 于 | 


<div class="nav-urls"> 容器 中 ， 与 <ul class="urls"> 列表 平 级 显示 。 


<div class="nav-urls"> 
<ul class="urls"></ul> 


<section class="reTop"> <a href="#top" class="btn btn1"><i class="i 让 下 1"></i> 返回 顶部 </a> </section> 


</div> 


通过 如 下 类 样式 ， 为 按钮 前 边 添加 一 个 图 标 ， 通 过 背景 图 像 +CSS Sprites 实现 。 
.i { background: url("../images/02.png") no-repeat: width: 10px: height: 10px: display: inline-block: vertical-align: middle: | 


-Webkit-background-size: 200px auto: background-size: 200px auto } 
.IF { width: 20px: height: 20px } 
.IF1 { background-position: -40px -40px } 


第 5 步 ,设计 普通 文本 导航 列表 ,设计 结构 和 样式 与 上 一 个 版 块 基本 相同 ,效果 如 图 6.20 所 示 。 


环球 
虎 扑 
美 团 
搜 歌 


第 7 步 ， 页 脚 版 块 包含 3 行 ， 第 一 行使 用 <nav class="foo"> 设计 一 个 导航 条 ， 底 部 使 用 两 个 p 元 素 设 


aos 


| 
| 计 两 段 段落 文本 ， 效 果 如 图 6.21 所 示 。 


| 部 内 容 包括 多 行 分 类 的 站 内 页 面 导 航 超 链接 ， 底 部 内 容 包括 多 个 超 链 接 和 版 权 信息 。 顶 部 结构 使 


本 7 名 动 Wt 开 家 从 入 门 到 将 通 ( 币 刘 本 信 歧 ) 
NER 


首页 新 闻 体育 娱乐 导航 
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图 6.21 定义 页 脚 版 本 


结构 代码 如 下 。 


<div class="nav-urls"> 
<footer class="site"> 
<nav class="foo" style="background-color#333333:"> <a href="http://m.sohu.com/"> 首页 </a> <a href="http:// 
m.sohu.com/c/2/"> 新 闻 </a>……</nav> 
<p class="inf"'> <a href="http://m.sohu.com/help/"> 留言 </a><i class="hyp">-</i> <a href="http://m.sohu.com/ 
c/432/"> 合作 </a> </p> 
<p class="cop">Copyright &copy:; 2018 Sohu.com</p> 
</footer> 
</div> 
【拓展 练习 】 
下 面 的 示例 以 本 节 演 示 示 例 为 基础 ， 设 计 一 个 类 似 的 导航 结构 页 面 ， 效 果 如 图 6.22 所 示 


5 。” ”站 内 导航 -手机 搜狐 a 


新 闻 。 国 内 国际 社会 评论 策划 
。 图 库 历史 专题 排行 快讯 
体育 。 自 球 NBA 综合 彩票 图 库 
。 国际 欧冠 英超 西甲 意甲 
“国内 中 超 亚 冠 奥运 直播 
汽车 。 新 车 导购 用 车 行情 车 型 
科技 。 网 络 通信 业界 科学 图 库 
。 数 码 导购 手机 苹果 安 卓 
提 车 天 气 软件 滚动 直播 


彩 版 ” 触 版 PC 版 客户 端 


Copyrght © 2013 Sohu com 


图 6.22 手机 站 内 导航 网 页 
整个 主体 结构 为 上 、 中 、 下 结构 。 顶 部 内 容 包括 返回 链接 按钮 、 标 题 文 字 和 主页 链接 按钮 ， 中 


| header 元 素 实 现 ， 中 部 结构 使 用 section 元 素 实 现 ， 底 部 结构 使 用 footer 元 素 实现 。 详 细 代码 请 参考 本 


| 节 示 例 源 代码 目录 下 的 “拓展 练习 ”文件 夹 。 
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6.3.2 ”设计 热 销 榜 


本 节 示 例 设 计 一 个 热 销 榜 页 面 ， 模 拟 手机 麦 包 包 触 屏 版 的 热 销 商 品 网 页 ， 


Evy 


TE | A 


价格 A 价格 we 失格 Re 


和 


和 名 旨 系 列 单 骨 

外 
价格 : W168.00 
人 @ 如 的 之 术 系 列 手提 笠 接 包 ¥199.00 
人 巴 s 霸 幸 克 列 手 提 笠 - ¥298.00 
0 币 的 之 美 系列 下 提 笠 提包 ¥219.00 


图 6.23 热 销 商品 页 面 效果 


整个 页 面 主体 为 上 、 中 、 下 结构 ， 顶 部 内 容 包括 LOGO 图 片 、 
接 按钮 ， 中 部 内 容 为 热 销 商品 列表 ， 底 部 为 多 个 导航 超 链接 


<header class="mbHead"> 
<div class="mbTop clearfix"> 
<div class="mbTop_wrap"> </div> 
</div> 
</header> 
<section id="mbMain"> 
<section class="productMod modTop"> 
<h3 class="modHd"> </h3> 
<div class="modBd"> </div> 
</section> 
</section> 
<footer class="mbFoot"> </footer> 


点 分 解 页 面 主体 区 域 的 列表 结构 。 


<section id="mbMain"> 
<section class="productMod modTop"> 


<h3 class="modHd"> 热 销 风云 榜 <a class="modMoreTag" href="#"> 更 多 </a> </h3> 


<div class="modBd"> 
<ul class="modList clearfix"> 
<li> 


9 


效果 如 图 6.23 所 示 。 


用 户 登录 超 链接 按钮 和 购物 车 | 


<div class="productImg"> <a hre 仁 "#"><img alt=" 西西 里 系列 手提 和 斜 挎包 " src="images/01jpg” 
| 


width="100%" /></a> 


“6rs 


ge 人 [7m 各 wet 古 家 从 入 门 到 将 通 ( 狼 训 靖 久 版) 


| 

| 

| 

| 

| <div class="modRankBTag"><span>1</span></div> 

| </div> 

| <div class="productName"> <a href="#"> 西西 里 系列 手提 和 斜 挎 .</a> </div> 
| <div class="productPrice"> 价格 : <em> 三 188.00</em></div> 

| 


Note | 


<ul class="modTextList"> 
<li> <span class="modRankSTag"><em>5</em></span> <span class="modGoodsName"><a href="#"> 
如 约 之 恋 系 列 手提 斜 挎包 </a></span> <span class="modGoodsPrice"> <em> 王 199.00</em> 
Sp </i> 


</section> 
</section> 


热 销 风云 榜 包 含 <ul class="modList clearfix"> 和 <ul class="modTextList"> 列表 框 ， 推 释 在 一 起 。 
| 第 一 个 列表 框 负责 前 4 个 产品 列表 项 目 ， 配 有 图 文 细节 ， 故 需要 单独 列 出 ; 第 二 个 列表 框 负责 后 面 多 
| 个 产品 列表 项 目 ， 由 于 仅 包 含 文本 ， 故 设计 得 比较 简单 ， 单 列 一 个 包含 框 ， 便 于 管理 。 

| 产品 列表 项 目 包 含 3 个 子 框 ， 具 体 说 明 : <div class="productImg"> 包含 链接 样 图 ，<div class= 
| "ProductName'> 包含 链接 产品 名 称 ，<div class="productPrice"> 包含 价格 信息 ，3 段 信息 垂直 堆 释 显示 ， 
| 如 图 6.24 所 示 。 
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图 6.24 图 文 产品 列表 


本 页 CSS 样式 代码 包含 在 两 个 外 部 样式 表 文件 中 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样 
| 式 表 ，common.css 为 通用 样式 表 ， 重 置 常用 元 素 默认 样式 。 限 于 篇 幅 ， 具 体 代码 请 读者 参考 本 节 示 例 源 代 
| 到。 下 面 重点 看 样 图 和 微 标的 设计 。 

第 1 步 ， 设 计 <div class="productImg"> 框 为 相对 定位 ， 为 下 面 的 徽标 设置 定位 参考 。 


.modBd .modList .productImg { margin-bottom: Spx: position: relative } 


| 第 2 步 ,设计 产品 样 图 大 小 ， 这 里 以 背景 图 的 方式 先 加 载 提示 性 动画 ,提示 如 果 图 没有 显示 ， 可 能 正 


so 
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.modBd .modList .productImg img { background: #e8e8e8 url(../images/loading.png) center center no-repeat: background- | 
Size: 130px 130px } 


| 
| 
在 加 载 ， 请 耐心 等 修 ， 因 为 移动 网 络 网 速 有 限 ， 对 加 载 样 图 会 有 影响 。 | 
| 
| 
| 
第 3 步 , 设计 产品 样 图 的 显示 样式 : 弹性 大 小 ， 取 消 边框 。 | 


.modBd .modList .productImg img { width: 100%:; height: auto; border 0 } 


| 
| 
第 4 步 ， 设计 徽标 样式 : 圆 形 、 定 位 到 产品 样 图 的 左上 角 位 置 ， 添 加 白 边 ， 高 亮 显 示 。 | 
| 
modRankBTag { position: absolute: top: -12px: left: -12px: width: 26px: height: 26px: display: block: border-radius: ， 
13px; background: #fff; box-shadow: 1px 1px 1px #999 } | 
| 
第 5 步 , 设计 徽标 包含 的 span 元 素 ， 定义 大 小 尺寸 和 字体 样式 。 | 
.modRankBTag span { backeround: #eclb23; width: 16px: height: 22px: display: block: line-height: 20px; border-radius: ， 
11px: margin: 3px 0 0 3px: font-size: 16px: text-align: left: padding: 0 0 0 6px: color: #fff: font-weight: 700 } 
【拓展 练习 】 
下 面 的 示例 以 本 节 演 示 示例 为 基础 ， 设 计 一 个 类 似 的 产品 列表 页 面 ， 效 果 如 图 6.25 所 示 。 


促销 商品 列表 


三 旺季 机 GT 办 552( 于 白 ) ”小米 季 机 红 兴 (不 凶 ) 黎 动 乒 
47 黄 二 屏 利 + 四 核 12GHz 红头 手机。 
¥1298.00 ¥92900 


草 时 手机 IPhone5S 三 星 手机 19500 ( 络 月 白 ) 
2G6 强 大 过 


(1668 ) (本 )。 行内 存 ,5 英寸 
¥4949.00 ¥3388.00 


图 6.25 产品 列表 页 面 


整个 主体 结构 为 上 、 中 、 下 结构 。 顶 部 内 容 包 括 返 回 链接 图 片 、 标 题 文字 和 主页 链接 图 片 ， 中 训 
内 容 包括 多 行 促销 商品 列表 ， 底 部 内 容 包 括 多 个 导航 超 链 接 和 版 权 信息 。 顶 部 结构 使 用 nav 元 素 实现 ， 
中 部 结构 使 用 section 元 素 实现 ， 底 部 结构 使 用 footer 元 素 实现 。 详 细 代 码 请 参考 本 节 示 例 源 代码 目录 | 
下 的 “拓展 练习 ”文件 夹 。 | 


6.3.3 设计 品牌 墙 


本 节 示 例 设计 一 个 品牌 墙 页 面 ， 模 拟 凡客诚 品 网 触 屏 版 的 品牌 墙 网 页 ， 效 果 如 图 6.26 所 示 。 | 
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图 6.26 设计 品牌 墙 页面 效 果 


页 面 主体 结构 为 上 、 中 、 下 结构 ， 顶 部 内 容 包 括 首页 链接 图 片 和 标题 文字 ， 中 部 内 容 包 括 多 行商 


| 品 品牌 列表 ， 


Re 顶部 结构 使 用 nav 元 素 实现 ， 中 部 结 i 构 使 用 section 元 素 


<header> </header> 
<section class="main"> </section> 
<footer> </footer> 


| 实现， 底部 结构 使 用 footer 元 素 实现 。 主 体 结构 代码 如 下 
| 
| 
| 


在 <section class="main"> 容器 中 ， 使 用 <div class="list"> 包 庄 一 个 dl 列表 结构 ， 其 中 使 用 dd 定义 


| 上 


' 牌 图 标 ， 使 用 dt 定义 品牌 名 称 


<div class="list"> 


<dl> 


<dt> 阿迪 达 斯 </dt> 


本 页 包含 
| 为 通用 样式 表 ， 


| 
| 
| 
| 
| 
| <dd> <a href="#"><img height="114" src="images/adi.jpg" width="98" /></a> </dd> 
| 
| 
| 
| 
| 
| 


两 个 外 部 样式 表 文 件 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，common.css 
重 置 常 用 元 素 默认 样式 。 下 面 重点 看 一 下 品牌 墙 列表 样式 设计 。 


第 1 步 , 在 main.css 文件 中 ,为 <div class="list"> 容器 定义 样式 ， 设 计 它 以 行内 块 显 示 ， 宽 度 为 视图 宽 


| 度 的 三 分 之 一 


(33.33% )， 这 样 可 以 实现 3 列 显示 效果 。 


list { width: 33.33%; display: inline-block: text-align: center: margin-top: 10px } 


为 列表 框 定义 宽度 和 高 度 ， 固 定 大 小 ， 以 行内 块 显示 ,定义 背景 色 为 白色 ， 将 图 片 墙 与 


| 网 风衣 最 区 分 省 米 。 圆 角 显示 ， 并 添加 微微 的 投影 


list dl { width: 98px: height: 114px: display: inline-block: background-color: #fff: border-radius: 3px: box-shadow: 0 0 
3pX#cbcbcb: overflow: hidden } 


第 2 步 ， 


| 第 3 步 ， 


分 别 定义 列表 框 中 包含 的 超 链接 样式 、 列 表 项 目标 题 和 描述 信息 样式 。 这 里 隐藏 文字 描 


uM 
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述 ， 仅 显示 图 片 。 


list a { color: #333; display: inline-block } 
.list dl dd { width: 98px: height: 114px: text-align: center: } | y 
list dl dt { display: none } | 


6.3.4 设计 品类 引导 列表 | 
本 节 示例 设计 家 用 电器 精 选 商品 品类 导航 页 面 ， 效 果 如 图 6.27 所 示 。 


| 

| 

所 春季 家 闪 池 。 旦 加 前 | 
| 

| 

| 


空调 / 形 电 /洗衣 机 /冰箱 / 厨 卫 


安心 乐 居 享 万 家 


图 6.27 设计 品类 导航 页 面 
页 面 主体 为 上 、 下 结构 ， 上 部 内 容 包括 返回 链接 图 片 、 标 题 文字 、 用 户 登录 链接 图 片 、 购 物 车 链 | 
接 图 片 和 首页 链接 图 片 ， 下 部 内 容 包括 多 行家 用 电器 精 选 商品 图 片 列表 。 上 部 结构 使 用 nav 元 素 实 现 ， 
下 部 结构 使 用 section 元 素 实现 。 主 体 结构 代码 如 下 。 


| 
| 
<nav class="nav nav-sub pr"> </nav> | 
<section> 
<div id="adHead" class="adv-banner"> </div> | 
<ul class="classify-con"></ul> | 
<div class="adv-pictures"> | 
<ul class="fix"></ul> | 
</div> | 
<ul class="classify-con"> </ul> | 
<div class="adv-pictures"> | 
<ul class="fix"></ul> | 
</div> 
<ul class="classify-con"> </ul> 
<div class="adv-pictures"> 
<ul class="fix"></ul> | 
</div> 
</section> 


和 放生 
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在 页 面 主体 部 分 ， 使 用 <div class="adv-pictures"> 和 <ul class="classify-con"> 两 个 容器 完成 品类 图 片 和 


| <div class="adv-pictures"> 结构 用 来 显示 品类 图 片 ， 如 果 是 单 张 图 片 ， 则 直接 包含 ; 如 果 是 两 张 图 片 ， 
| 则 包含 一 个 <ul class="fix"> 列表 框 ， 代 码 如 下 。 


<div class="adv-pictures"> 
| <ul class="fix"> 
| <li><a hre 全 "javascriptvoid(0):" onclick=""> <img src="images/02.jpe" alt=" 超 值 精 选 "width="146" 
| height="196" /> </a> </li> 
| <li><a href="javascript:void(0):" onclick=" "> <img src="images/03.jpg" alt=" 最 多 评价 " width="146" 
| height="196" /> </a></li> 
| </u> 
| </div> 
| 本 页 包含 3 个 外 部 样式 表 文件 : main.css、foot.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，footcss 
| 为 页 脚 样式 ，common.css 为 通用 样式 表 ， 重 置 常用 元 素 默认 样式 。 
| 在 main.css 样式 表 文 件 中 ， 可 以 找到 下 面 这 个 样式 ， 它 用 来 控制 <div class="adv-pictures"> 容器 内 列表 
| 项 目 向 左 浮动 ， 让 两 个 图 片 并 列 显示 
.adv-pictures ul li { float: left; width: 146px; margin-bottom: 8px; text-align: left; } 


<ul class="classify-con"> 结构 用 来 显示 品类 说 明文 字 ， 代 码 如 下 


| 
| 

| 

| 

| <ul class="classify-con"> 
| <li style="border-color:#7c78 信 :"></li> 

| <li style="background:#7c78 信 "> <a hre 仁 "#"><i> 冰箱 空调 </i><span> 更 多 <em>&gt</em></span></a> </i> 
| <li style="border-color:#7c78 储 :"></li> 

</ul> 


| 左右 两 个 <li style="border-color:#7c78 住 "> 用 来 绘制 装饰 线 ， 中 间 一 个 <li style="background:#7c78 丛 "> 用 
| 来 包含 文字 ， 通 过 CSS 设计 显示 为 圆 角 ， 效 果 如 图 6.28 所 示 


空调 /彩电 /洗衣 机 /冰箱 / 厨 卫 


安心 乐 居 享 万 家 


=== 
图 6.28 ”设计 品类 说 明文 字 


| 让 定义 容器 相对 定位 ， 以 便 定位 底部 两 条 装饰 线 */ 
| .Classify-con { position: relative: width: 300px: height: 30px: line-height 30px: margin: 10px auto Opx auto: } 
| 此 让 底部 3 个 列表 项 目 绝对 定位 */ 


-ee 
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入 让 第 一 个 列表 项 目 显示 为 直线 后 ， 定 位 到 文字 左 侧 显 示 */ 

.classify-con li:first-child { width: 73px; height: 18px: left: Opx: top: 1Spx: border-top: #ffsesSa solid 1px; } 
族 定 义 第 二 个 列表 项 目 圆 角 显示 ， 并 显示 在 中 间 ， 背 景色 与 装饰 线 同 色 ， 固 定 大 小 */ | 
-classify-con li:nth-child(2) { width: 140px: height: 32px: left: 80px: top: Opx: background: #ff5e5a; border-radius: 20px: 
text-align: center: } | 
片 让 第 三 个 列表 项 目 显 示 为 直线 后 ， 定 位 到 文字 右 侧 显示 */ 

.Classify-con li:nth-child(3) { width: 73px: height: 18px: right: Opx: top: 15px; border-top: #ff5e5a solid 1px; } 


| 
| 
| 
| 
.Classify-con li { position: absolute: } | 
| 
| 
| 
| 
| 


6.3.5 为 快捷 菜单 添加 命令 


6.1.8 节 介绍 了 弹出 菜单 的 示例 ， 但 是 没有 任何 功能 ， 本 节 将 介绍 如 何 使 用 JavaScript 实现 这 些 功能 。 
详细 操作 步骤 和 示例 效果 请 扫 码 阅读 。 Se ias 回 
Ey 


6.3.6 设计 快捷 分 享 命令 


本 节 的 示例 设计 一 个 更 实用 的 分 享 功能 ， 右 击 页 面 中 的 文本 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “下 载 文件 ” 
命令 ， 可 以 下 载 本 次 相关 作者 画像 ; 选择 “查看 源 文件 ”命令 ， 可 以 在 新 窗口 中 直接 浏览 作者 画像 ; 选择 
“我 要 分 享 | 反馈 ”命令 ， 可 以 询问 是 否 向 指定 网 址 反馈 信息 ; 选择 “我 要 分 享 |Email” 命 令 ， 可 以 在 地 址 栏 
中 发 送信 息 ， 也 可 以 向 指定 邮箱 发 送信 息 。 详 细 操 作 步 又 和 示例 效果 请 扫 码 阅读 。 


6.3.7 设计 任务 列表 命令 


本 节 示 例 设计 一 个 动态 添加 列表 项 目的 功能 。 右 击 项 目 列表 文本 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 添 加 
新 任务 ”命令 ， 可 以 快速 为 当前 列表 添加 新 的 列表 项 目 。 详 细 操作 步 又 和 示例 效果 请 扫 码 阅读 。 


6.3.8 设计 排行 榜 列 表 结 构 


音乐 排行 榜 ， 主 要 体现 的 是 当前 某 个 时 间 段 某 些 歌曲 的 排名 情况 。 本 节 示 例 
的 基本 设计 样式 。 详 细 操作 步 又 和 示例 效果 请 扫 码 阅读 。 


线 上 阅读 


6.3.9 设计 图 文 列表 栏目 


图 文 列表 结构 就 是 将 列表 内 容 以 图 片 的 形式 在 页 面 中 显示 ， 简 单 理解 就 是 图 片 列表 信息 附带 简短 的 文 | 
字 说 明 。 在 图 中 展示 的 内 容 主要 包含 列表 标题 、 图 片 和 图 片 相关 说 明 的 文字 。 本 节 将 结合 示例 进行 说 明 ，| 
详细 操作 步骤 和 示例 效果 请 扫 码 阅读 。 | 


a 


人 


多 
6.4 ”在 线 练习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTMLS5 设计 超 链 接 样式 和 列表 样式 。 


在 嫌 丝 习 
超 链接 练习 专辑 列表 练习 专辑 
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应 用 多 媒体 


在 移动 页 面 中 恰当 应 用 多 媒体 技术 ， 不 仅 能 够 传递 丰富 的 信息 ， 还 可 以 美化 页 面 ， 
提升 浏览 者 的 审美 体验 。 在 HIMLS 之 前 ， 为 网 页 添加 多 媒体 的 唯一 方法 就 是 使 用 插件 ， 
如 Adobe Flash Player 和 QuickTime 等 。HTML5 引入 原生 的 多 媒体 技术 ， 改 变 了 这 一 状 
况 ， 但 是 不 同 浏览 器 支持 不 同 格式 的 视频 和 音频 。 本 章 将 详细 讲解 不 同类 型 的 多 媒体 对 
象 在 移动 页 面 中 的 应 用 。 


【学 习 重 点 】 

I 认识 网 页 图 像 。 

PI 在 页 面 中 插入 图 像 。 

WI 设置 图 像 替 代 文 本 、 图 像 尺 寸 等 属性 。 

I 在 网 页 中 添加 音频 和 视频 。 

WI 设置 视频 自动 播放 、 循 环 播放 和 海报 图 像 等 属性 。 
PI 使 用 多 种 来 源 的 视频 和 备用 文本 。 


Note 


a 7wss 各 芭 Wit 生发 以 入 门 到 精通 ( 航 保 精 六 小) 


7.1 认识 网 页 图 像 


常用 的 网 页 图 像 格式 有 3 种 : GIF 、JPEG 和 PNG。 下 面 将 简单 比较 这 3 种 图 像 格式 的 特点 。 
回 GIF 图 像 格式 
GIF 图 像 格式 最 早 于 1987 年 开发 ， 经 过 多 年 改进 ， 其 特性 如 下 : 
(1 ) 具有 跨 平 台 能 力 ， 不 用 担心 兼容 性 问题 。 
| (2 ) 具有 一 种 减少 颜色 显示 数目 而 极度 压缩 文件 的 能 力 。 它 压缩 的 原理 是 不 降低 图 像 的 品质 ， 而 是 减 
| 少 显示 色 ， 最 多 可 以 显示 的 颜色 是 256 色 ， 所 以 它 是 一 种 无 损 压 缩 。 
(3 ) 支持 背景 透明 的 功能 ， 便 于 图 像 更 好 地 融合 到 其 他 背景 色 中 。 
| (4) 可 以 存储 多 张 图 像 ， 并 能 动态 显示 这 些 图 像 ，GIF 动画 目前 在 网 上 广泛 运用 。 
| 回 JPEG 图 像 格式 
| JPEG 图 像 格式 使 用 全 彩 模式 来 表现 图 像 ， 其 特性 如 下 : 
(1) 与 GIF 格式 不 同 ，JPEG 格式 的 压缩 是 一 种 有 损 压 缩 ， 即 在 压缩 处 理 过 程 中 ， 图 像 的 某 些 细节 将 被 
| 忽略 ， 因 此 ， 图 像 将 有 可 能 会 变 得 模糊 一 些 ， 但 一 般 浏 览 者 是 看 不 出 来 的 。 
| (2 ) 与 GIF 格式 相同 ， 它 也 具有 跨 平台 的 能 力 。 
| (3 ) 支持 1670 万 种 颜色 ， 可 以 很 好 地 再 现 摄影 图 像 ， 尤 其 是 色彩 丰富 的 大 自然 。 
| (4) 不 支持 GIF 格式 的 背景 透明 和 交错 显示 功能 。 
| 回 PNG 图 像 格式 
| PNG 图 像 格式 于 1995 年 开发 ， 是 一 种 网 络 专用 图 像 格 式 ， 它 具有 GIF 图 像 格 式 和 JPEG 图 像 格 式 的 双 
| 重 优点 。 一 方面 它 是 一 种 新 的 无 损 压 缩 文 件 格式 ， 压 缩 技术 比 GIF 好 ; 另 一 方面 它 支持 的 颜色 数量 达到 了 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


1670 万 种 ， 同 时 还 包括 对 索引 色 、 灰 度 、 真 彩色 图 像 以 及 Alpha 通道 透明 的 支持 。PNG 是 Adobe Fireworks 
固有 的 文件 格式 。 

PNG 包括 多 个 子 类 : PNG-8、PNG-24 和 PNG-32。 一 般 来 说 ， 对 于 PNG 和 GIF ， 应 优先 选择 PNG， 因 
为 它 对 透明 度 的 支持 更 好 ， 压 缩 算法 也 更 好 ， 产 生 的 文件 更 小 。 

(1) PNG-8 适用 于 标识 、 重 复 的 图 案 以 及 其 他 颜色 较 少 的 图 像 或 具有 连续 颜色 的 图 像 ， 支 持 256 色 ， 
支持 索引 色 ( 基本 ) 透明 和 alpha 透明 。 

(2 ) PNG-24 与 PNG-8 相似 ， 不 过 支持 颜色 更 多 的 图 像 。 适 用 于 颜色 丰富 且 质 量 要 求 高 的 照片 ， 支 持 
1600 万 以 上 颜色 数 ， 仅 支持 索引 色 ( 基本 ) 透明 。 

(3 ) PNG-32 与 PNG-24 相似 ， 不 过 支持 具有 alpha 透明 的 图 像 ， 以 及 1600 万 以 上 的 颜色 。 

GIF 和 PNG-8 图 像 只 有 256 种 颜色 ， 对 标志 和 图 标 来 说 通常 这 已 经 足够 了 。JPEG、PNG-24 和 了 PNG-32 
| 均 支 持 超过 1600 万 种 的 颜色 ， 因 此 照片 和 复杂 的 插图 应 选择 这 些 格式 。 不 过 对 于 这 些 图 像 ， 大 多 数 情况 下 
| 应 使 用 JPEG。 
在 网 页 设计 中 ， 如 果 图 像 颜色 少 于 256 色 时 ， 建 议 使 用 GIF 格式 ， 如 LOGO 等 ; 而 颜色 较 丰 富 时 ， 应 
| 使 用 JPEG 格式 ， 如 在 网 页 中 显示 的 自然 画面 的 图 像 。 


1 


| 痊 提示 : 使 用 SVG 图 像 语言 创建 的 图 像 ， 无 论 放大 还 是 缩小 都 不 会 影响 其 质量 。 目 前 ， 几 乎 所 有 的 现代 
浏览 器 都 提供 基本 的 SVG 支持 ， 因 此 用 户 可 以 在 网 页 中 使 用 SVG。 


Ss 
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7.2 使 用 图 像 | 


可 以 在 网 页 中 插入 各 种 类 型 的 图 像 ， 从 标志 到 照片 都 可 以 。 当 访问 者 浏览 网 页 时 ， 浏 览 器 会 自动 加 载 | Note 
HTML 文档 中 标记 的 图 像 。 不 过 ， 图像 加 载 时 间 与 访问 者 的 网 络 连接 强度 、 图 像 尺 寸 ， 以 及 页 面 中 包含 的 | 
图 像 个 数 相关 。 


7.2.1 使 用 img 元 素 


在 HTML5 中 ,使 用 img 元 素 可 以 把 图 像 插入 网 页 中 ， 具体 用 法 如 下 : 
<img src="URL" alt=" 替代 文本 " 亡 


img 元 素 向 网 页 中 典 入 一 幅 图 像 ， 从 技术 上 分 析 ，img 元 素 并 不 会 在 网 页 中 插入 图 像 ， 而 是 从 网 页 上 链 

接 图 像 ，img 元 素 创 建 的 是 被 引用 图 像 的 占 位 空间 | 
党 提示 : img 元 素 有 两 个 必需 的 属性 : ste 属性 和 alt 属性 。 具 体 说 明 如 下 。 
回 alt: 设置 图 像 的 替代 文本 。 使 用 alt 属性 可 以 为 图 像 添加 一 段 描述 性 文本 ， 当 图 像 出 于 某 种 | 
原因 不 显示 的 时 候 ， 就 将 这 段 文 字 显 示 出 来 。 屏 幕 阅读 器 可 以 朗读 这 些 文本 ， 帮 助 视 障 访 | 

问 者 理解 图 像 的 内 容 。 | 

加 src: 定义 显示 图 像 的 URL。 


【示例 】 下 面 的 示例 是 在 页 面 中 插入 一 幅 照 片 ， 在 浏览 器 中 预览 效果 如 图 7.1 所 示 。 
<img src="images/1.jpg" width="400" alt=" 读书 女生 "> 
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图 7.1 在 网 页 中 插入 图 像 


HIMLS 为 img 元 素 定义 了 多 个 可 选 属性 ， 简 单 说 明 如 下 。 

回 height: 定义 图 像 的 高 度 。 取 值 单位 可 以 是 像素 或 者 百分比 。 | 
回 width: 定义 图 像 的 宽度 。 取 值 单位 可 以 是 像素 或 者 百分比 。 | 
回 ismap: 将 图 像 定义 为 服务 器 端 图 像 映射 。 | 


wTrs 


[7p 各色 Wit 开发 从 入 站 到 茜 适 ( 微 裸 精 编 版 ) 


usemap: 将 图 像 定义 为 客户 器 端 图 像 映射 。 

回 longdesc: 指向 包含 长 的 图 像 描 述 文档 的 URL。 

其 中 不 再 推荐 使 用 HTML4 中 的 部 分 属性 ， 如 align ( 水 平 对 齐 方式 )、border ( 边框 粗细 )、hspace ( 左 
| 右 空白 )、vspace ( 上 下 空白 )， 对 于 这 些 属性 ，HTMLS5 建议 使 用 CSS 属性 代替 使 用 。 


Note | 


7.2.2 定义 流 内 容 


流 内 容 是 由 页 面 上 的 文本 引述 出 来 的 。 在 HIMLS 出 现 之 前 ， 没 有 专门 实现 这 个 目的 的 元 素 ， 因 此 一 
些 开发 人 员 使 用 没有 语义 的 div 元 素来 表示 。 通 过 引入 figure 和 figcaption 元 素 ，HITML5 改变 了 这 种 情况 。 
流 内 容 可 以 是 图 表 、 照 片 、 图 形 、 插 图 、 代 码 片段 ， 以 及 其 他 类 似 的 独立 内 容 。 可 以 由 页 面 上 的 其 他 
内 容 引 出 figure。figcaption 是 figure 的 标题 ， 可 选 ， 出 现在 figure 内 容 的 开头 或 结尾 处 。 例 如 : 
<figure> 
<p> 思索 </p> 
<img src="images/] .jpg" width="350" /> 
</figure> 


| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

上 面 所 示 的 代码 中 ，figure 元 素 中 只 有 一 张 照片 ， 不 过 放置 多 个 图 像 或 其 他 类 型 的 内 容 ( 如 数据 表格 、 
视频 等 ) 也 是 允许 的 。figcaption 元 素 并 不 是 必需 的 ， 但 如 果 包 含 它 ， 它 就 必须 是 figure 元 素 内 艇 的 第 一 
| 或 最 后 一 个 元 素 。 除 了 在 现代 浏览 器 中 从 新 的 一 行 开 始 显示 ，figure 没有 默认 样式 。 
| 注意 ，figure 元 素 并 不 一 定 要 包含 在 article 元 素 里 ,但 在 大 多 数 情况 下 这 样 做 比较 合适 。 
通常 ，figure 元 素 是 引用 它 的 内 容 的 一 部 分 , 但 它 也 可 以 位 于 页 面 的 其 他 部 分 或 位 于 其 他 页 面 ( 如 
| | 附录 和 

| 【示例 】 在 下 面 的 示例 中 ， 包 含 图 像 及 其 标题 的 figure 元 素 出 现在 article 文本 中 间 。 图 以 缩 进 的 形式 显 
| 示 ， 这 是 浏览 器 的 默认 样式 ， 如 图 7.2 所 示 。 

<article> 

| <h1>2017 年 12 月 ,全球 PC 浏览 器 市 场 份额 排行 榜 </h1> 
| <p> 第 1 名 : Google 的 Chrome 浏览 器 ， 其 全 球 市 场 份额 为 64.72%; </p> 
| <p> 第 2 名 : Mozilla Firefox， 其 市 场 份额 为 12.21%; </p> 

<p> 第 3 名 : 微软 的 正 浏览 器 ， 其 市 场 份额 为 7.71%; </p> 

| <p> 第 4 名 : 苹果 的 Safari 浏览 器 ， 其 市 场 份 额 为 6.29%; </p> 

| <p> 第 5 名 : 微软 的 Edge 浏览 器 ， 其 市 场 份额 为 4.18%; </p> 

| <p> 第 6 名 : Opera 浏览 器 ， 其 市 场 份额 为 2.31%; </p> 

| <p> 其 他 浏览 器 的 市 场 份 额 合计 为 2.58%。 </p> 

| <figure> 

| <figcaption><b>12 月 份 </b> 全 球 浏览 器 市 场 份额 </figcaption> 

| <img src="images/111.pne" width="300" /> </figure> 

| <p> 数据 来 源 : StatCounter-Desktop Browsers</p> 

| </article> 

| 

| 

| 

| 

| 

| 


| figure 元 素 可 以 包含 多 个 内 容 块 。 不 过 要 记 住 ,不 管 figure 里 有 多少 内 容 ， 只 人 允许 有 一 个 figcaption 

| 元 素 。 

| 注意 ， 不 要 简单 地 将 figure 元 素 作为 在 文本 中 嵌入 独立 内 容 实例 的 方法 。 这 种 情况 下 ， 通 常 更 适合 用 
aside 元 素 。 要 了 解 如 何 结合 使 用 blockquote 和 figure 元 素 。 


Os 
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可 选 的 figcaption 必须 与 其 他 内 容 一 起 包含 在 figure 里 面 ， 不 能 单独 出 现在 其 他 位 置 。figcaption 中 的 文 | 
| 


本 是 对 内 容 的 一 名 简短 描述 即 可 ， 就 像 照 片 的 描述 文本 。 


现代 浏览 器 在 默认 情况 下 会 为 figure 添加 40 像素 宽 的 左右 外 边 距 。 可 以 使 用 CSS 的 margin-left 和 
margin-right 属性 修改 这 一 样式 。 例 如 ， 使 用 margin-left:0: 让 图 直接 抵 到 页 面 左边 缘 。 还 可 以 使 用 figure | 


{ float: left; } 让 包含 figure 的 文本 环绕 在 它 周围 ， 这 样 文本 就 会 围 在 图 的 右 侧 。 可 能 还 需要 为 fgure 设置 | 


width 属性 ， 使 之 不 至 于 占据 太 大 的 水 平 空间 。 


x 
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2017 年 12 月 ， 全 球 PC 浏 览 器 市 场 份额 排行 榜 


第 1 名 ，Google 的 Chrome 浏 览 器 ， 其 全 球 市 场 份额 为 64.7296， 
第 2 名 ，Mozilla Firefox， 其 市 场 份额 为 1221%; 

第 3 名 ， 微 软 的 IE 浏览 器 ， 其 市 场 份额 为 77196; 

第 4 名 ， 苹 果 的 Safari 浏 览 器 ， 其 市 场 份额 为 629%6; 

第 5 名 ， 微 软 的 Edge 浏 览 器 ， 其 市 场 份额 为 4.1896; 

第 6 名 ，Opera 浏 览 器 ， 其 市 场 份额 为 23196; 

其 他 浏览 器 的 市 场 份额 合计 为 2.58%。 


12 月 份 全 球 浏览 器 市 场 份额 
12 月 全 球 PC 浏览 器 市 场 份额 排行 榜 


数据 来 源 ，StatCounter-Desktop Browsers 


图 7.2 流 内容 显 示 效 果 


7.2.3 ”插入 图 标 


网 站 图 标 一 般 显示 在 浏览 器 选项 卡 、 历 史记 录 、 书 签 、 收 藏 夹 或 地 址 栏 中 。 图 标 大 小 一 般 为 16 像素 | 


x 16 像素 ， 透明 背景 。 移 动 设备 图 标 大 小 : iPhone 图 标 大 小 为 57 像素 x 57 像素 或 114 像素 x 114 像素 


( Retina 屏 )，iPad 图 标 大 小 为 72 像素 x 72 像素 或 144 像素 x 144 像素 ( Retina 屏 )。Android 系统 支 
尺寸 的 图 标 。 
第 1 步 , 创建 大 小 为 16 像素 x 16 像素 的 图 像 ， 保 存 为 favicon.ico， 注 意 扩展 名 为 .ico。 为 Retina 
建 一 个 32 像素 x 32 像素 的 图 像 。 
提示 ，ico 文件 允许 在 同一 个 文件 中 包含 多 个 不 同 尺寸 的 同名 文件 。 


touchicon.png。 如 有 和 需要， 还 可 以 创建 其 他 的 触 屏 图 标 。 


las 


竺 该 | 


导 


第 2 步 ， 为 触 屏 设备 至 少 创建 一 个 图 像 ， 并 保存 为 PNG 格式 。 如 果 只 创建 了 一 个 ， 将 其 命名 为 apple- | 


第 3 步 ， 将 图 标 图 像 放 在 网 站 根 目录 。 


eic 和 mWzuk 开 去 信和 站 到 精通 ( 蕉 课 靖 病 及) 


第 4 步 ， 新 建 HIML5 文档 ， 在 网 页 头 部 位 置 输入 下 面 代 码 。 


<link rel="icon" href="/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 


第 5 步 ， 浏览 网 页 ， 浏览 器 会 自动 在 根 目录 寻找 这 些 特定 的 文件 名 ， 找 到 后 就 将 图 标 显示 出 来 。 
次 提示 :如 果 浏 览 器 无 法 显示 ， 则 可 能 是 浏览 器 缓存 和 生成 图 标 慢 问题 ， 尝 试 清除 缓存 ， 或 者 先 访问 图 标 : 


http:/localhost/favicon ico， 然 后 再 访问 网 站 ， 就 正常 显示 了 。 


1. 查看 图 像 大 小 
可 以 通过 浏览 器 或 图 像 编辑 软件 获取 图 像 的 精确 尺寸 。 
四 在 浏览 器 中 查看 图 像 尺 十 
右 击 图 像 ， 在 弹出 的 快捷 菜单 中 选择 查看 图 像 信 息 ， 有 具体 选项 取决 于 所 使 用 的 浏览 器 ， 出 现 的 框 中 会 以 像 


17.2.4 “定义 图 像 大 小 


| 素 为 单位 显示 图 像 的 尺寸 。 例 如 ,在 正 中 选择 快捷 菜单 中 的 “属性 "， 可 以 看 到 如 图 73 所 示 的 提示 对 话 框 。 


HyperText Transfer Protocol 


类 型 : 不 可 用 
增强 http://imes. imgtn_ bdimg com/it/u=1765553367, 368 
2903516&fn=2T&gp=0. jpE 


大 小 : 10368 字 节 
分 辨 车 381 x 198 p: 


创建 时 间 : 2018/2/25 
修改 时 间 : 2018/2/25 


回 ”在 Photoshop 中 查看 图 像 尺 十 
在 Photoshop 中 打开 图 像 ， 选 择 “ 图 像 | 图 像 大 小 ”菜单 命令 ,打开 “图 像 大 小 ”对 话 框 可 以 快速 了 解 


图 像 的 尺寸 信息 。 


2. 设置 图 像 大 小 


pb 


在 img 元 素 中 ， 


使 


width 和 height 


图 7.3 查看 图 像 大 小 信息 


属性 可 以 设置 图 像 大 小 ， 以 像素 为 单位 。 例 如 : 


<img src="pic gif' width="400" height="266" alt=" " /> 


width 和 height 属性 不 一 定 要 反映 图 像 的 实际 尺寸 。 在 Retina 显示 屏 中 可 以 设置 height 和 width 均 为 图 


a 
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次 提示 : 在 相同 的 空间 里 ，Retina 显示 屏 拥有 的 像素 数量 是 普通 显示 屏 的 像素 数量 的 四 倍 ， 因 此 图 像 会 更 
锐利 。 | 
在 默认 情况 下 ， 图 像 显 示 的 尺寸 是 HTML 中 指定 的 width 和 height 属性 值 。 如 果 不 指定 这 些 属性 ， 
值 ， 图 像 就 会 自动 按照 其 原始 尺寸 显示 。 此 外 ， 可 以 通过 CSS 以 像素 为 单位 设置 width 和 height。 
当 屏 幕 宽 度 有 限 的 时 候 ， 使 用 可 伸缩 图 像 技术 ， 可 以 让 图 像 在 可 用 空间 内 缩放 ， 但 不 会 超过 其 本 
来 的 宽度 。 例 如 ， 为 图 像 添加 如 下 类 样式 : 

.post-photo,.post-photo-full { 

max-width: 100%%: 
8 
一 定 要 使 用 max-width: 100% ， 而 不 是 width: 100%。width: 100% 会 让 图 像 尽 可 能 地 填充 容器 ， 
如 果 容 器 的 宽度 比 图 像 帘 ， 图 像 就 会 放大 到 超过 其 本 来 尺寸 ， 显 得 较为 难看 。 上 面 的 样式 对 已 
经 为 Retina 显示 屏 扩 大 到 双 倍 大 小 的 图 像 也 适用 。 


| 
| 
像 原来 大 小 的 一 半 ， 由 于 图 像 的 高 度 和 宽度 比例 保持 不 变 ， 图 像 就 不 会 失真 。 | 
| 
| 
| 


7.2.5 案例 : 图 文 混 排 


在 网 页 中 经 常会 看 到 图 文 混 排 的 版 式 ， 不 管 是 单 图 还 是 多 图 ， 也 不 管 是 简单 的 文字 介绍 还 是 大 段 正文 ， 
图 文 版 式 的 处 理 方式 很 简单 。 在 本 节 示 例 中 所 展示 的 图 文 混 排 效果 ， 主 要 是 文字 围绕 在 图 片 的 旁边 进行 
显示 。 

第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 testhtml， 在 <body> 标签 内 输入 以 下 代码 。 


<div class="pic_news"> 
<hl> 雨 埠 </hl> 
<h2> 戴 望 舒 </h2> 
<p><img src="images/1.jpe" alt="" /></p> 
<p> 撑 着 油纸 企 ， 独 自 
征 律 在 悠长 、 悠 长 
又 疲 寥 的 雨 埠 ， 
我 希望 逢 着 
一 个 丁香 一 样 的 
结 着 愁 怨 的 姑娘 。 </p> 
<p> 她 是 有 
丁香 一 样 的 颜色 ， 
丁香 一 样 的 芬芳 ， 
丁香 一 样 的 忧愁 ， 
在 雨中 哀怨 ， 
哀怨 又 衍 乱 ; </p> 
<!-- 省 略 部 分 结构 雷同 的 文本 ， 请 参考 示例 源 代码 -> 
</div> 


第 2 步 ， 在 <head> 标签 内 添加 <style type="text/ess"> 标签 ， 定义 一 个 内 部 样式 表 ， 然 后 输入 下 面 的 样 | 
式 代码 ， 设 置 图 片 的 属性 ， 将 其 控制 到 内 容 区 域 的 左上 角 。 | 


5 181= 


2 


| 
| 
| 
| 
| -pic_ news { width: 800px: 广 控 制 内 容 区 域 的 宽度 ， 根 据 实际 情况 考虑 ， 也 可 以 不 需要 */ 
中 
| 
中 
| 


1 

.pic_news h2 {/* 定义 标题 样式 */ 
font-family: " 隶书 ": font-size: 24px: 上 户 字 体 样式 : 隶书 、 大 小 为 24 像素 */ 
text-align: right: 请 标题 2 居 右 显示 */ 

让 

Note .pic news img { 语 定 义 图 片 样式 *#/ 

float: left: 久 使 图 片 旁 边 的 文字 产生 浮动 效果 */ 
margin-right: Spx: 上 增加 图 片 与 文字 的 间距 */ 
height: 250px: 启 控 制图 片 大 小 */ 


| 第 3 步 ， 在 浏览 器 中 预览 ,效果 如 图 7.4 所 示 。 简 单 几 行 CSS 样式 代码 就 能 实现 图 文 混 排 的 页 面 效果 ， 
| 其 中 重点 内 容 就 是 将 图 片 设置 浮动 ，float:left 就 是 将 图 片 向 左 浮动 。 


| 
| 
| 
| 
| 


bl 择 著 视 纸 伞 ， 狂 自 访 穆 在 雹 长 、 修 长 又 窒 容 的 而 若 ， 我 着 皇 说 着 一 个 丁香 一 样 的 结 
着 臣 急 的 类 粕 。 
pd 翌 的 频 色 ， 丁 香 一 样 的 苏 芳 ， 丁 香 一 样 的 忧 黎 ， 在 两 中 京 臣 ， 京 息 又 


\ i 浑 乔 福 纪 全 ， 但 我 一 伞 ， 保 我 一 样 地 灶 周 徊 吴 看 尘 济 、 凌 
后 由 ， 


pe 走 近 ， 又 抽出 本 息 一 般 的 轨 光 她 嘻 过 像 扫 一 般 地 ， 像 势 一 般 地 浪 师 


-: 三 我 身 劣 味 过 这 个 女 印 ， 好 逢 默 地 远 了 ， 远 了 ， 到 了 闫 志 的 乱 


在 十 的 京 曲 音 ， 消 了 她 的 颜色 ， 胡 了 好 的 芬芳 ， 稍 散 了 ， 其 至 好 的 大 息 要 的 限 光 丁 知 刷 的 秽 帐 。 
提 厦 灿 纸 个 ， 狂 自 往往 在 您 长 、 侯 长 只 和 加 的 雨 知 ， 我 希 弄 扫 计 一 个 丁香 一 样 的 抽 着 想 短 的 结 女 。 


图 7.4 图 文 混 排 的 页 面 效 果 


7.3 使 用 多 媒体 插件 


在 HTML5 之 前 ， 可 以 通过 第 三 方 插件 为 网 页 添加 音频 和 视频 ， 但 这 样 做 有 一 些 问题 : 在 某 个 浏览 器 中 
| 嵌入 Flash 视频 的 代码 在 另 一 个 浏览 器 中 可 能 不 起 作用 ， 也 没有 优雅 的 兼容 方式 。 同 时 ， 像 Flash 这 样 的 插 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


| 件 会 占用 大 量 的 计算 资源 ， 使 浏览 器 会 变 慢 ， 影 响 用 户 体验 。 


embed 元 素 可 以 定义 嵌 和 插件， 以便 播放 多 媒体 信息 。 用 法 如 下 。 
<embed src="helloworld.swf' /> 


7.3.1 使 用 embed 元 素 


| src 属性 必须 设置 ， 用 来 指定 媒体 源 。embed 元 素 包含 的 属性 说 明 如 表 7.1 所 示 。 


sl 
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表 7.1 embed 元 素 属 性 


值 


设置 谋 入 内 容 的 高 度 


height pixels ( 像素 ) 
SIC ul 嵌入 内 容 的 URL 
type | type 定义 嵌入 内 容 的 类 型 


pixels ( 像素 ) 设置 嵌入 内 容 的 宽度 


【示例 1】 设 计 背 景 音乐 。 打 开本 小 节 备 用 练习 文档 testl.html1， 另 存 为 test2.html。 在 <body> 标签 和 内 输 | 


和 人 下面 的 代码 
<embed src="images/bg.mp3" width="307" height="32" hidden="true" autostart="true" loop="infinite"></embed> 


ae | 


藏 插件 显示 ， 使 用 autostart="true" 设置 背 


指定 背景 音乐 为 "images/bg.mp3"， 通 过 设置 hidden="true" 隐 


景 音乐 自动 播放 ， 使 用 loop="infinite" 设置 背景 音乐 循环 播放 。 设 置 完毕 属性 ， 在 浏览 器 中 浏览 ， 这 时 就 可 | 


以 边 济 ， 览 网 页 ， 边 听 着 背景 音乐 播放 的 小 夜曲 


党 提示 : 要 正确 使 用 ， 需 要 浏览 器 支持 对 应 的 插件 


【示例 2】 播放 视频 。 新 建 test3.html， 在 <body> 标签 内 输入 下 面 的 代码 


<embed src="images/vid2.avi" width="413" height="292"></embed> 


使 用 width 和 height 属性 设置 视频 播放 窗口 的 大 小 ， 在 浏览 器 中 浏览 效果 ， 如 图 7.5 所 示 
x 
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图 7.5 插入 视频 


7.3.2 ”使 用 object 元 素 
使 用 object 元 素 可 以 定义 一 个 戏 入 对 象 ， 主 要 用 于 在 网 页 中 插入 多 媒体 信息 ， 如 图 像 、 音 频 、 视 频 、 
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Java applets 、ActiveX、PDF 和 Flash。 


object 元 素 包 含 大 量 属性 ， 说 明 如 表 7.2 所 示 。 
表 7.2 object 元 素 属性 


属 性 什 描述 
| DRL 定义 引用 对 象 数据 的 URL。 如 果 有 需要 对 象 处 理 的 数据 文件 ， 要 用 data 属性 来 指定 这 
| 些 数据 文件 
| om form_id 。 | 规定 对 象 所 属 的 一 个 或 多 个 表单 
| height pixels 定义 对 象 的 高 度 
| name unique_name | 为 对 象 定义 唯一 的 名 称 ( 以 便 在 脚本 中 使 用 ) 
| MIME_ type “| 定义 被 规定 在 data 属性 中 指定 的 文件 中 出 现 的 数据 的 MIME 类 型 
usemap URL 规定 与 对 象 一 同 使 用 的 客户 端 图 像 映射 的 URL 
width pixels 定义 对 象 的 宽度 


<object width="100%" type="image/jpeg" data="images/1.jpg"></object> 


【示例 2】 下 面 的 代码 使 用 object 元 素 在 页 面 中 嵌入 网 页 ， 效 果 如 图 7.7 所 示 
<object type="text/html" height="100%" width="100%" data="https://www.baidu.com/"></object> 


| 
| 【示例 1】 下 面 的 代码 使 用 object 元 素 在 页 面 中 嵌入 一 幅 图 片 ， 效 果 如 图 7.6 所 示 
| 
| 
| 
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图 7.6 嵌入 图 片 图 7.7 嵌入 网 页 


【示例 3】 下 面 的 代码 使 用 object 元 素 在 页 面 中 嵌入 音频 。 


<object width="100%" classid="clsid:22D6F312-BOF6-11D0-94AB-0080C74C7E95"> 
<param name="AutoStart" value="1" /> 
<param name="FileName" value="images/bg.mp3" /> 

</object> 
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次 提示 :param 元 素 必须 包含 在 object 标 签 内 ， 用 来 定义 嵌入 对 象 的 配置 参数 ， 通 过 名 / 值 对 属性 来 设置 ， 
name 属性 设置 配置 项 目 ，vValue 属性 设置 项 目 值 。 


object 功能 很 强大 ， 初 庙 是 取代 img 和 applet 元 素 。 不 过 由 于 漏洞 以 及 缺乏 浏览 器 支持 ， 并 未 完全 实 


位 于 <object> 和 </object> 之 间 的 代码 ， 通 过 这 种 方式 ， 我 们 针对 不 同 的 浏览 器 嵌 套 多 个 object 元 素 ， 或 者 
柑 套 embed、img 等 元 素 。 


7.4 使 用 HIMLS 多 媒体 


HTML5 添加 了 原生 的 多 媒体 。 这 样 做 有 很 多 好 处 : 速度 更 快 ( 任何 浏览 器 原生 的 功能 势必 比 插件 要 快 
一 些 )， 媒 体 播放 按钮 和 其 他 控件 内 置 到 浏览 器 ， 对 插件 的 依赖 极 大 地 降低 。 | 
现代 浏览 器 都 支持 HIMLS 的 audio 元 素 和 video 元 素 ， 如 正 9.0+、Firefox 3.5+、Opera 10.5+、Chrome | 
3.0+、Safari 3.2+ 等 。 | 


audio 元 素 可 以 播放 声音 文件 或 音频 流 ， 支 持 Ogg Vorbis、MP3 、WAV 等 音频 格式 ， 其 用 法 如 下 。 
<audio src="samplesong.mp3" controls="controls"></audio> 


7.4.1 使 用 audio 元 素 | 


其 中 ，src 属性 用 于 指定 要 播放 的 声音 文件 ; controls 属性 用 于 设置 是 否 显 示 工 具 条 。audio 元 素 可 用 的 
属性 如 表 7.3 所 示 。 | 


表 7.3 audio 元 素 支持 属性 


属 性 说 明 
autoplay autoplay 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 如 播放 按钮 
loop loop 如 果 出 现 该 属性 ， 则 每 当 音 频 结束 时 重新 开始 播放 
preload Praload 如 果 使 用 "autoplay"， 则 忽略 该 属性 
SIC ul 要 播放 的 音频 的 URL 


党 提示 : 如 果 浏 览 器 不 支持 audio 元 素 ， 可 以 在 <audio> 与 </audio> 之 间 谈 入 替换 的 HTML 字符 串 ， 这 
样 旧 的 浏览 器 就 可 以 显示 这 些 信息 。 例 如 : 
<audio src=" test.mp3" controls="controls"> 
您 的 浏览 器 不 支持 HTML5 audio。 
</audio> 
替换 内 容 可 以 是 简单 的 提示 信息 ， 也 可 以 是 一 些 备 用 音频 插件 ， 或 者 是 音频 文件 的 链接 等 。 | 


| 
| 
| 
| 
| 
如 果 出 现 该 属性 ， 则 音频 在 页 面 加载 时 进行 加 载 ， 并 预备 播放 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
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现 ， 同 时 主流 浏览 器 都 使 用 不 同 的 代码 来 加 载 相同 的 对 象 。 如 果 浏 览 器 不 能 够 显示 object 元 素 ， 就 会 执行 


ey 7mss 向 Wit 生 必 以 入 门 到 精通 ( 微 课 精 编 版 ) 


| 
| 
| 
| 
| 【示例 1】audio 元 素 可 以 包 庄 多 个 source 元 素 ， 用 来 导入 不 同 的 音频 文件 ， 浏 览 器 会 自动 选择 第 一 个 
| 
| 
| 
| 
| 


| 可 以 识别 的 格式 进行 播放 。 
| <audio controls> 


<source src="medias/test.ogg" type="audio/ogg"> 
<source src="medias/test.mp3" type="audio/mpeg"> 
Note <p> 你 的 浏览 器 不 支持 HTML5 audio， 你 可 以 <a href="piano.mp3"> 下 载 音频 文件 <a> (MP3. 1.3 MB)</p> 
</audio> 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.8 所 示 ，audio 元 素 ( 含 默认 控件 集 ) 定义 了 两 个 音频 
| 源 文件 ， 一 个 编码 为 Ogg， 另 一 个 为 MP3。 完 整 的 过 程 同 指定 多 个 视频 源 文件 的 过 程 是 一 样 的 。 浏 览 器 会 
忽略 它 不 能 播放 的 ， 仅 播放 它 能 播放 的 。 

支持 Ogg 的 浏览 器 ( 如 Firefox ) 会 加 载 test.ogg。Chrome 同时 理解 Ogg 和 MP3， 但 是 会 加 载 Ogg 文 
| 件 ， 因 为 在 audio 元 素 的 代码 中 ，Ogg 文件 位 于 MP3 文件 之 前 。 不 支持 Ogg 格式 ， 但 支持 MP3 格式 的 浏 
| 览 器 (IE10 ) 会 加 载 testmp3 ， 旧 浏览 器 ( 如 IE8 ) 会 显示 备用 信息 。 


D localhost/test1.html «+ x 
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图 7.8 播放 音频 


| 【补充 】 

| source 元 素 可 以 为 video 和 audio 元 素 定义 多 媒体 资源 ， 它 必须 包 庄 在 <video> 或 <audio> 标签 内 。 
| source 元 素 包含 以 下 3 个 可 用 属性 。 

| media: 定义 媒体 资源 的 类 型 。 

| 回 src: 定义 媒体 文件 的 URL。 

| 回 type: 定义 媒体 资源 的 MIME 类 型 。 如 果 媒 体 类 型 与 源 文件 不 匹配 ， 浏 览 器 可 能 会 拒绝 播放 。 可 以 
| 省 略 type 属性 ， 让 浏览 器 自动 检测 编码 方式 。 

| 为 了 兼容 不 同 的 浏览 器 ， 一 般 使 用 多 个 source 元 素 包含 多 种 媒体 资源 。 对 于 数据 源 ， 浏 览 器 会 按照 声 
| 明 顺 序 进行 选择 ， 如 果 支 持 的 不 止 一 种 ， 那 么 浏览 器 会 优先 播放 位 置 靠 前 的 媒体 资源 。 数 据 源 列表 的 排放 
| 顺序 应 按照 用 户 体验 由 高 到 低 ， 或 者 服务 器 消耗 由 低 到 高 列 出 。 

| 【示例 2】 下 面 的 示例 演示 了 如 何在 页 面 中 插入 背景 音乐 : 在 audio 元 素 中 设置 autoplay 和 loop 属性 ， 
| 详细 代码 如 下 所 示 。 

| <audio autoplay loop> 

| <source src="medias/test.ogg" type="audio/ogg"> 

| <source src="medias/test.mp3" type="audio/mpeg"> 

| 您 的 浏览 器 不 支持 HTML5 audio。 

| </audio> 

| 

| 
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Video 元 素 可 以 播放 视频 文件 或 视频 流 ， 支 持 Ogg、MPEG-4、WebM 等 视频 格式 ， 其 用 法 如 下 。 


<video src="samplemovie.mp4" controls="controls"></video> 


7.4.2 ”使 用 video 元 素 | 


其 中 ，src 属性 用 于 指定 要 播放 的 视频 文件 ; controls 属性 用 于 提供 播放 、 和 暂停 和 音量 控件 。video 元 素 
可 用 的 属性 如 表 7.4 所 示 。 


表 7.4 video 元 素 支 持 属性 
属性 值 描 述 
autoplay | autoplay | 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 
controls “| controls | 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 
height pixels 设置 视频 播放 器 的 高 度 | 
loop | loop | 如 果 出 现 该 属性 ， 则 当 媒介 文件 完成 播放 后 再 开始 播放 
muted muted ”| 设置 视频 的 音频 输出 应 该 被 静音 | 
| 
| 
| 
| 


ele ely 如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 "autoplay"， 则 忽略 | 


该 属性 
SIC ul 要 播放 的 视频 的 URL 
width pixels 设置 视频 播放 器 的 宽度 


【补充 】 | 
HTMLS5 的 video 元 素 支持 3 种 常用 的 视频 格式 ， 简 单 说 明 如 下 ， 浏 览 器 支持 情况 如 下 。Safari 3+、| 
Firefox 4+ 、Opera 10+、Chrome 3+、IE 9+ 等 。 | 

回 0Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

回 MPEG-4: 带 有 HH.264 视频 编码 和 AAC 音频 编码 的 MPEG-4 文件 

回 WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 


| 
| 
| 
| 
| 
尖 提示 : 如 果 浏览 器 不 支持 Video 元 素 ， 可 以 在 <video> 与 <video> 之 间 谈 入 痊 换 的 HTML 字符 囊 ， 这 
样 旧 的 浏览 器 就 可 以 显示 这 些 信息 。 例 如 : | 
<video src=" test.mp4" controls="controls"> | 
您 的 浏览 器 不 支持 HTMLS5 video。 | 
</video> | 
【示例 1】 下 面 的 示例 使 用 video 元 素 在 页 面 中 嵌入 一 段 视频 ， 然 后 使 用 source 元 素 链接 不 同 的 视频 文 
件 ， 浏 览 器 会 自己 选择 第 一 个 可 以 识别 的 格式 。 | 
<video controls> | 
<source src="medias/trailer.ogg" type="video/ogg"> | 
<source src="medias/trailer. mp4" type="video/mp4"> | 
您 的 浏览 器 不 支持 HTMLS5 video。 
</video > 


sar 
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| 浏览 器 会 加 载 第 一 个 它 支持 的 source 元 素 引 用 的 文件 格式 ， 并 忽略 其 他 的 来 源 。 
| 以 上 代码 在 Chrome 浏览 器 中 运行 ， 当 鼠标 经 过 播放 画面 ， 可 以 看 到 出 现 一 个 比较 简单 的 视频 播放 控 
| 制 条 ， 包 含 了 播放 、 和 暂停 、 位 置 、 时 间 显 示 、 音 量 控制 等 控件 ， 如 图 7.9 所 示 。 


| 一 个 video 元 素 中 可 以 包含 任意 数量 的 source 元 素 ， 因 此 为 视频 定义 两 种 不 同 的 格式 是 相当 容易 的 。 
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图 7.9 播放 视频 


| 当 为 video 元 素 设置 controls 属性 ， 可 以 在 页 面 上 以 默认 方式 进行 播放 控制 。 如 果 不 设置 controls 属性 ， 
| 那么 在 播放 的 时 候 就 不 会 显示 控制 条 界面 
| 【示例 2】 通 过 设置 autoplay 属性 ， 不 需要 播放 控制 条 ， 音 频 或 视频 文件 就 会 在 加 载 完成 后 自动 播放 
<video autoplay> 

<source src="medias/trailer.ogg" type="video/ogg"> 

<source src="medias/trailer.mp4" type="video/mp4"> 

您 的 浏览 器 不 支持 HTMLS5 video。 
</video > 


也 可 以 使 用 JavaScript 脚本 控制 媒体 播放 ， 简 单 说 明 如 下 

回 load0: 可 以 加 载 音频 或 者 视频 文件 

回 play0: 可 以 加 载 并 播放 音频 或 视频 文件 ， 除 非 已 经 暂停 ， 否 则 默认 从 开头 播放 

回 pause0: 暂停 处 于 播放 状态 的 音频 或 视频 文件 。 

回 ”canPlayType(type): 检测 video 元 素 是 否 支持 给 定 MIME 类 型 的 文件 。 

| 【示例 3】 下 面 的 示例 演示 了 如 何 通过 移动 鼠标 来 触发 视频 的 play 和 pause 功能 。 设 计 当 用 户 移动 鼠标 
到 视频 界面 上 时 ， 播 放 视频 ， 如 果 移 出 鼠标 ， 则 和 暂停 视频 播放 。 


<video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true" 
width="400px" height="300px"> 

| <source src="medias/trailer.ogv" type='Video/ogg: codecs="theora. vorbis"> 

| <source src="medias/trailer.mp4" type=' video/mp4> 

| </video> 
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上 面 的 代码 在 浏览 器 中 预览 ， 显 示 效 果 如 图 7.10 所 示 


ee] 


| 有 由-… 念 hapxjilocalho. ~ BO 


全 localhost 


5 
E 
二 
天 
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E 
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图 7.10 使 用 鼠标 控制 视频 播放 


内 提示 : 要 实现 循环 播放 ， 只 需要 使 用 autoplay 和 loop 属性 。 如 果 不 设 置 autoplay 属性 ， 通 常 浏览 器 会 


在 视频 加 载 时 显示 视频 的 第 一 帧 ， 用 户 可 能 想 对 此 做 出 修改 ， 指 定 自己 的 图 像 。 这 可 以 通过 海 
报 图 像 实现 


例如 ， 下 面 的 代码 设置 自动 播放 和 循环 播放 的 单个 WebM 视频 。 如 果 这 里 不 设置 controls， 访 问 者 就 无 
法 停止 视频 。 因 此 ， 如 果 将 视频 指定 为 循环 ， 最 好 包含 controls 

<video src="paddle-steamer.webm" width="369" height="208" autoplay loop></video> 

下 面 的 代码 指定 了 海报 图 像 ( 当 页 面 加 载 并 显示 视频 时 显示 该 图 像 ) 的 单个 WebM 视频 ( 含 控件 ) 

<video src="paddle-steamer.webm" width="369" height="208" poster="paddle-steamer-poster.jpg" controls></video> 

其 中 ，paddle-steamer.webm 指向 视频 文件 ，paddle-steamer-posterjpg 是 想 用 作 海 报 图 像 的 图 像 

如 果 用 户 观看 视频 的 可 能 性 较 低 ( 如 该 视频 并 不 是 页 面 的 主要 内 容 )， 那 么 可 以 告诉 浏览 器 不 要 预先 
加 载 该 视频 。 对 于 设置 了 preload="none" 的 视频 ， 在 初始 化 视频 之 前 ， 浏 览 器 显示 视频 的 方式 并 不 一 样 
例如 : 
<video src="paddle-steamer.webm" preload="none" controls></video> 
上 面 的 代码 在 页 面 完全 加 载 时 也 不 会 加 载 单个 WebM 视频 , 仅 在 用 户 试 着 播放 该 视频 时 才 会 加 载 它 
这 里 省 略 了 width 和 height 属性 。 
在 Firefox 中 将 preload 设 为 none 的 视频 ， 什 么 也 不 会 显示 ， 因 为 浏览 器 没有 得 到 关于 该 视频 的 任何 信 


息 ( 连 尺寸 都 不 知道 )， 也 没有 指定 海报 图 像 。 如 果 用 户 播放 视频 ,浏览 器 会 获取 视频 的 尺寸 ， 并 调整 视频 
大 小 


Chrome 在 控制 组 件 上 面 显示 一 个 空白 的 矩形 。 这 时 ， 控 制 组 件 的 大 小 比 访问 者 播放 视频 时 显示 的 组 件 
要 罕 一 些 
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| 
| 
| 
preload 的 默认 值 是 auto。 这 会 让 浏览 器 具有 用 户 将 要 播放 该 视频 的 预期 ， 从 而 做 好 准备 ， 让 视频 可 以 
| 
| 
| 
| 


快 进入 播放 状态 。 浏 览 器 会 预先 加 载 大 部 分 视频 甚至 整个 视频 。 因 此 ， 在 视频 播放 的 过 程 中 对 其 进行 多 


很 
次 开始 、 和 暂停 的 操作 会 变 得 更 不 容易 ， 因 为 浏览 器 总 是 试 着 下 载 较 多 的 数据 让 访问 者 观看 。 
在 none 和 auto 之 间 有 一 个 不 错 的 中 间 值 ， 即 preload="metadata"。 这 样 做 会 让 浏览 器 仅 获取 视频 的 基 
本 信息 ， 如 尺寸 、 时 长 甚至 一 些 关键 的 帧 。 在 开始 播放 之 前 ,浏览 器 不 会 显示 白色 的 矩形 ， 而 且 视 频 的 尺 
寸 也 会 与 实际 尺寸 一 致 。 
使 用 metadata 会 告诉 浏览 器 ， 用 户 的 连接 速度 并 不 快 ， 因 此 需要 在 不 妨碍 播放 的 情况 下 尽 可 能 地 保留 
< 全 注意 : 如 果 要 获得 所 有 兼容 HTML5 的 浏览 器 的 支持 ， 至 少 需要 提供 两 种 格式 的 视频 : MP4 和 WebM。 
| 这 时 就 要 用 到 HTMLS 的 source 元 素 了 。 通常 ,source 元 素 用 于 定义 一 个 以 上 的 媒体 元 素 的 来 源 。 
例如 ， 下 面 的 代码 为 视频 定义 了 两 个 源 : 一 个 MP4 文件 和 一 个 WebM 文件 。 
<video width="369" height="208" controls> 
<source src="paddle-steamer.mp4" type="video/mp4"> 
<source src="paddle-steamer.webm" type="video/webm"> 
<p><a href="paddle-steamer.mp4"> 下 载 视频 </a></p> 
</video> 
可 以 在 www.bigbuckbunny.org/index.php/download/ 网 站 上 找到 一 些 免费 的 视频 ， 用 于 试验 video 和 
| source 元 素 。 该 网 站 没有 WebM 格式 的 视频 ， 不 过 可 以 通过 在 线 工 具 进 行 格式 转换 。 
【补充 】 
| 利用 现代 浏览 器 提供 的 原生 可 访问 性 支持 ， 原 生 多 媒体 可 以 更 好 地 使 用 键盘 进行 控制 ， 这 是 原生 多 媒 
| 体 的 男 一 个 好 处 。HTMLS5 视频 和 音频 的 键盘 可 访问 性 支持 在 Firefox、Internet Explorer 和 Opera 中 表现 良 
| 好 。 不 过 对 于 Chrome 和 Safari， 实 现 键盘 可 访问 性 的 唯一 办 法 是 自制 播放 控件 。 为 此 ， 需 要 使 用 JavaScript 
| Media API ( 这 也 是 HTML5 的 一 部 分 )。 
| HTML5 还 指定 了 一 种 新 的 文件 格式 WebVTT ( Web Video Text Track，Web 视频 文本 轨道 ) 用 于 包含 广 
| 本 字幕 、 标 题 、 描 述 、 篇 章 等 视频 内 容 。 更 多 信息 可 以 参见 www.iandevlin.conmyblog/2011/05/html5/webvtt- 
| and-video-subtitles， 其 中 包括 为 了 对 接 规 范 修改 在 2012 年 进行 的 更 新 。 


7.5 案例 实战 


17.5.1 设计 网 页 音乐 播放 器 


| 
| 
| 
| 本 节 示 例 设计 一 个 网 页 音乐 播放 器 ， 浏 览 效果 如 图 7.11 所 示 。 
| 
| 
| 
| 
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网 页 音乐 播放 器 的 主体 为 上 、 中 
模式 切换 按钮 。HTML 结构 代码 如 下 


<div id="player"> 
<audio id="musicbox"></audio> 
<div 
<div 
<div 
<div 


next"></div> 
="progress"> 
<div></div> 


图 7.11 设计 网 页 音乐 播放 器 
、 下 结构 ， 顶 部 分 布 了 多 个 播放 按钮 ， 中 部 为 音乐 列表 ， 底 部 为 播放 | 


controls" class="clearfix controls"> 
play" class="playing"></div> 


<p id="time">00:00 / 00:00</p> 


</div> 

<div id="volume"><div></div></di 
</div> 

<div class="bar"> 


iv> 


<button> 重 置 列表 </button> 
<button> 随机 打 乱 </button> 
<button> 清空 列表 </button> 


</div> 
<ul id="musiclist"></ul> 


<div class="bar bottom"> <span> 播放 模式 : </span> <span id="mode"> 全 部 </span> </div></div> 


在 界面 中 插入 一 个 <audio id="mu 


audio { 
display: none: 
} 


在 脚本 文件 playerjs 中 ， 设 计 当 站 


function playMusic(index) { 
playingFile = ImusicFiles[index]: 
$media.attr("src". playingFile.urD): 
$media[0].playO: 


sicbox"> 标签 ， 在 main.css 样式 表 中 隐藏 音频 控件 。 


$("#musiclist>li").removeClass("isplay").eq(index).addClass("isplay"): 


slols 


击 播放 按钮 时 ， 让 <audio id="musicbox"> 播放 指定 的 音频 文件 。 
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CD 
bk 说 
De 


auto():; 


} 

y 有 关 页 面 的 详细 样式 代码 和 播放 器 操控 脚本 ， 请 参考 本 节 示 例 源 代码 ， 限 于 篇 幅 本 节 仅 抛砖引玉 。 其 
设计 原理 是 : 获取 要 播放 的 文件 相对 路 径 ， 然 后 把 它 传递 给 audio 元 素 的 src 属性 ， 再 调用 HTML5 多 媒体 
API 中 相关 属性 、 方 法 或 事件 ， 进 行 控制 ， 或 各 种 逻辑 设计 。 


7.5.2 设计 MP3 播放 条 


本 节 示 例 设计 一 个 MP3 播放 条 ， 初 始 界面 效果 如 图 7.12 所 示 


Mr's Musicl 


图 7.12 MP3 播放 条 初始 界面 效果 


在 播放 条 中 单 击 “ 展 示 ” 按 钮 贺 ， 即 可 显示 歌曲 播放 列表 ， 单 击 歌 曲名 称 即 可 开始 播放 音乐 ， 如 图 7.13 
| 所 示 


图 7.13 显示 歌曲 播放 列表 


本 节 示 例 的 设计 思路 和 实现 代码 与 上 一 节 示 例 基本 相同 ， 只 不 过 是 重 设 了 HIML 结构 ， 主 体 为 上 、 中 、 
下 结构 ， 顶 部 分 布 了 多 个 播放 按钮 ， 中 部 为 音乐 列表 ， 底 部 为 播放 模式 切换 按钮 。 HTML 结构 代码 如 下 。 


<audio id="myMusic"> </audio> 
<input id="PauseTime" type="hidden" /> 
<div class="musicBox"> 
<div class="leftControl"></div> 
<div id="mainControl" class="mainControl"></div> 
<div class="rightControl"></div> 
<div class="processControl"> 
<div class="songName">MY's Music!</div> 
<div class="songTime">00:00&nbsp:|&nbsp:00:00</div> 
<div class="process"></div> 
<div class="processYet"></div> 
| </div> 
| <div class="voiceEmp"></div> 
<div class="voidProcess"></div> 
<div class="voidProcessYet"></div> 
| <div class="voiceFull"></div> 
| <div class="showMusicList"></div> 
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</div> 
<div class="musicList"> 
<div class="author"></div> 
<div class="list"> 
<div class="single"> <span class="songName" kv=" 感恩 的 心 ">01. 感恩 的 心 </span> </div> 
<div class="single"> <span class="songName" kv=" 相思 风雨 中 ">02. 相思 风雨 中 </span> </div> 
<div class="single"> <span class="songName" kv=" 北京 北京 ">03. 北京 北京 </span> </div> 
<div class="single"> <span class="songName" kv=" 爱 与 诺言 ">04. 爱 与 诺言 </span> </div> 
</div> 
</div> 


在 页 面 中 通过 <div class="musicBox"> 容器 设计 一 个 个 性 的 MP3 播放 条 UI， 内 部 包含 多 个 div 元 素 ， 
然后 使 用 CSS 分 别 设计 播放 条 的 各 种 控制 按钮 
在 audiojs 脚本 文件 中 ， 为 每 个 按钮 绑 定 click 事件 ， 监 听 控 制 条 的 行为 ， 并 根据 用 户 操作 执行 相应 的 


i class="musicList"> 容 NS -个 歌曲 列表 ， 默 认 隐 藏 显示 。 当 在 控制 条 内 单 击 “展开 ”按钮 时 ， 
显示 <div class="musicList"> } ， 当 用 户 选 择 一 首 歌曲 ， 则 通过 JavaScript 脚本 把 歌曲 的 路 径 传递 给 audio 
元 素 进行 播放 。 详 细 代码 请 参考 本 节 示 例 源 代码 


7.5.3 设计 视频 播放 器 


本 节 示 例 将 设计 一 个 视频 播放 器 ， 用 到 HIMLS 提供 的 video 元 素 以 及 HIMLS 提供 的 多 媒体 API 的 扩 
展 ， 示 例 演 示 效 果 如 图 7.14 所 示 


图 7.14 设计 视频 播放 器 


使 用 JavaScript 控制 播放 控件 的 行为 ( 自 定义 播放 控件 )， 可 实现 如 下 功能 
回 利用 HIML+CSS 制作 一 个 播放 控件 ， 然后 定位 到 视频 最 F 方 


回 ”视频 加 载 loading 效果 。 

回 播放 、 和 暂停 

回 总 时 长 和 当前 播放 时 长 显示 。 
回 ”播放 进度 条 。 

加 全屏 显示 。 
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第 1 步 ， 设 计 播放 控件 。 


<figure> 
<figcaption> 视频 播放 器 </figcaption> 
<div class="player"> 
<video src="./video/mvImp4"></video> 
<div class="controls"> 
<!-- 播放 /暂停 -> 
<a href="javascript:;" class="switch fa fa-play"></a> 
<!-- 全 屏 -> 
<a href="javascript:;" class="expand fa fa-expand"></a> 
<!-- 进度 条 -> 
<div class="progress"> 
<div class="loaded"></div> 
<div class="line"></div> 
<div class="bar"></div> 
</div> 
<!-- 时 间 --> 
<div class="timer"> 
<span class="current">00:00:00</span> / 
<span class="total">00:00:00</span> 


</div> 
<!-- 声音--> 
</div> 
</div> 
</figure> 


上 面 是 全 部 的 HTML 代码 ， 其 中 .controls 类 是 制作 播放 控件 的 HTML 代码 ， 引 用 CSS 外 部 样式 表 。 


<link rel="stylesheet" href="css/font-awesome.css"> 
<link rel="stylesheet" href="css/player.css"> 


为 了 显示 播放 按钮 等 图 标 ， 本 示例 使 用 了 字体 图 标 


第 2 步 , 设计 视频 加 载 loading 效果 。 先 隐藏 视频 ， 用 一 个 背景 图 片 蔡 代 ， 等 视频 加 载 
示 并 播放 视频 。 


.player { 
width: 720px: height: 360px: 
margin: 0 auto: position: relative: 
background: #000 url(images/loading.gif) center/300px no-repeat: 
上 
Video { 
display: none: margin: 0 auto: 
height: 100%:; 
上 


第 3 步 ， 设 计 播 放 功 能 。 在 JavaScript 脚本 中 ， 先 获取 要 用 到 的 DOM 元 素 。 


Var Video = document.querySelector("video"): 
Var isPlay = document.querySelector(".switch"): 
Var expand = document.querySelector(".expand"): 
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Var progress = document.querySelector(".progress"); 

Var loaded = document.querySelector(".progress > .loaded"); 

var currPlayTime = document.querySelector(".timer > .current"); 
Var totalTime = document.querySelector(" .timer > .total"): 


当 视 频 可 以 播放 时 ， 显 示 视频 。 


// 当 视 频 可 播放 的 时 候 
Video.oncanplay = function(){ 

// 显示 视频 

this.style.display = "block": 

// 显示 视频 总 时 长 

totalTime.innerHTML = getFormatTime(this.duration): 
}; 


第 4 步 ,设计 播 放 、 和 暂停 按钮 。 当 点 击 播放 按钮 时 ， 显 示 和 暂停 图 标 ， 在 播放 和 和 暂停 状态 之 间 切 换 图 标 。 


/播放 按钮 控制 
isPlay.onclick = functionO{ 
这 video.paused) { 
Video.play(): 
} else { 
Video.pause(): 
} 
this.classList.toggle ("fa-pause"):; 
上 


第 5 步 ， 获 取 并 显示 总 时 长 和 当前 播放 时 长 。 前 面 代码 中 其 实 已 经 设置 了 相关 代码 ， 此 时 只 需要 把 获 | 


取 到 的 毫秒 数 转换 成 需要 的 时 间 格 式 即 可 。 先 定义 getFormatTime0 函数 ， 用 于 转换 时 间 格 式 ， 


function getFormatTime(time) { 

var time = time 0; 

var h = parseInt(time/3600), 
m= parseInt(time%3600/60), 
$= parseInt(time%60); 

h=h<10?"0"+h:h; 

m=m<102"0"+m :ID 

s=8< 102"0"ts:s; 

Teturn ht+":"+m+":"+s; 


} 
第 6 步 , 设计 播放 进度 条 。 


Video.ontimeupdate = functionO{ 
Var currTime = this.currentTime. // 当前 播放 时 间 


duration = this.duration: // 视频 总 时 长 
/百分比 

Var pre = currTime / duration * 100 + "%": 

// 显示 进度 条 


loaded.style.width = pre: 
// 显示 当前 播放 进度 时 间 
currPlayTime.innerHTML = getFormatTime(currTime): 


“Ds 
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( 


| 这 样 就 可 以 实时 显示 进度 条 了 ， 此 时 ， 还 需要 点 击 进度 条 进行 跳跃 播放 ， 即 点 击 任意 时 间 点 时 ， 视 频 
跳 转 到 当前 时 间 点 播放 。 


// 跳跃 播放 
progress.onclick = function(e){ 


Var event =€ Window.event': 
Video.currentTime = (event.offsetX / this.offsetWidth) * video.duration: 


I 
| 
| 上 


} 

第 7 步 ,设计 全 屏 显 示 。 这 个 功能 可 以 使 用 HTMLS5 提供 的 全 局 API: webkitRequestFullScreen 实现 ， 
| 与 video 元 素 无 关 ， 经 测试 在 Firefox、 正 下 全 屏 功能 不 可 用 ， 仅 针对 webkit 内 核 浏览 器 可 用 。 

// 全屏 


expand.onclick = fonction0){ 
video.webkitRequestFullScreen(): 


7.6 HIMLS 多 媒体 API 


使 用 HIML5 原生 多 媒体 的 好 处 是 可 以 利用 很 多 来 自 HIMLS 或 与 HTML5 相关 的 新 特性 和 新 功能 。 前 
| 提 是 读者 需要 有 一 定 的 JavaScript 基础 。 本 节 为 线 上 拓展 内 容 ， 
| 感 兴趣 的 读者 请 扫 码 阅读 。 


| 
| 
| 
| 
| 
| 上 
| 
| 
| 
| 
| 
| 


7.6.1 设置 属性 


audio 和 video 元 素 拥 有 相同 的 脚本 属性 ， 关 于 这 些 属性 的 介绍 请 读者 扫 码 学 习 。 


| 
7.6.2 设置 方法 


audio 和 video 元 素 拥 有 相同 的 脚本 方法 ， 读 者 可 扫 码 学 习 这 些 方法 。 


17.6.3 设置 事件 


| audio 和 video 元 素 支 持 HTML5 的 媒体 事件 ， 使 用 JavaScript 脚本 可 以 捕捉 这 些 事件 并 对 其 进行 处 理 。 
| 关于 处 理 这 些 事件 的 方式 读者 可 扫 码 学 习 。 


7.6.4 ”综合 案例 


| 本 节 通 过 一 个 综合 示例 整合 HTML5 多 媒体 API 中 各 种 属性 、 方 法 和 事件 ， 演 示 如 何在 一 个 视频 中 实 
| 现 对 这 些 信息 进行 访问 和 操控 。 示 例 效果 如 图 7.15 所 示 。 
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HTML5 Web Video API 


loadstart 
empted _( canplay 
canplaythrough seehed 5 
ended 0 pauae 
atachange 


currentSre 有 WiCVUseryalDocumentshwwwiestlwdeolaermpy crossOrigin undefned | 
proload Pop bunered lobjoct TmaRanges} 
seehing (be corentTime 30.4151797 
Paused alse gefaultPlaybockRate 


Pplayed fobloct TrmoRanges| soekable lobjoct TimeRanges] 
sutoplay Be oop le 


图 7.15 HTML5 多 媒体 API 接口 访问 | 


第 1 步 ， 设 计 文档 结构 。 整 个 结构 包含 3 部 分 : <video id='video> 视频 播放 界面 、<div id='buttons> 视 | 
频 控 制 方法 集 、<div id="info"> 接口 访问 信 ， 


<hl>HTMLS Web Video API</hl> 
<div> 
<video id='video' controls preload='none' poster="video/trailerpng"> 
"mp4' src="video/trailer.mp4" type='video/mp4'> | 
"Webm' src="video/trailer.webm" type='video/webm'> | 
<source jd='ogV' src="Vvideo/trailer.ogv" type='video/ogg> | 
<p> 你 的 浏览 器 不 支持 HTML5 video 元 素 。</p> | 
</video> | 
<div id='buttons'> | 
<button onclick="getVideo0.load0">load0</button> | 


</div> 
<div id="info"> 
<table> 
<caption> 媒体 事件 </caption> 
<tbody id='events> </tbody> 
</table> 
<table> | 
<caption> 媒体 属性 </caption> | 
<tbody id='properties></tbody> 
</table> | 
<table id='canPlayType> 
<caption> 播放 类 型 </caption> 
<tbody id='m video'></tbody> | 
</table> | 
<table id='tracks> | 
<caption> 轨道 </caption> 
<tbody> 
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| <tr><th>Audio</th><th>Video</th><th>Text</th></tr> 
<tr><td id='m audiotracks' class='false>?</td><td id="m videotracks' class='false>?</td> <td id='’m texttracks' 


| </tbody> 


| </table> 
</div> 
</div> 


class='false’>?</td></tr> 


第 2 步 , 初始 化 多 媒体 事件 和 属性 数据 。 
/初始 化 事件 类 型 


media_events| 
media_events| 
media_events| 
media_events| 
media_events| 
media_events| 
media_events| 
media_events| 


media_events| 
media_events| 


media_events| 
media_events| 
media_events| 


| 显示 在 页 面 表格 


第 3 步 ， 初始 
| 素 所 存储 的 事件 类 型 ， 


"loadstart"] = 0; 
"progress"] = 0: 
"suspend"] = 0: 
"abort"] = 0; 


| 
| 
| 
| 
| Var media_ events = new Array():; 
| 
| 
| 
| 


"error' 


中 =0: 


"emptied"] = 0; 
"stalled"] = 0; 
"loadedmetadata"] = 0: 


media_events["loadeddata"] = 0; 
media_events["canplay"] = 0; 


"canplaythrough"] = 0; 
"playing"] = 0: 


media_events["waiting"] = 0; 


"seeking"] = 0: 


"seeked"] = 0: 


"ended"] = 0; 


从化 


media_events["durationchange"] = 0: 
media_events["timeupdate"] = 0: 
media_events["play"] = 0: 
media_events["pause"] = 0: 
media_events["ratechange"] = 0: 
media_events["resize"] = 0; 
media_events["volumechange"] = 0: 
/ 在 数组 中 汇集 多 媒体 属性 

Var media properties = [ "error", "sre", "srcObject", "currentSre", "crossOrigin", "networkState". "preload", "buffered", 
"readyState", "seeking", "currentTime", "duration","paused", "defaultPlaybackRate". "playbackRate", "played". "seekable". 
"ended", "autoplay". "loop". "controls". "volume"."muted". "defaultMuted". "audioTracks". "videoTracks", "textTracks", 
"width", "height". "videoWidth". "videoHeight". "poster" ]: 


有 件 函 数 ， 在 该 函数 中 根据 初始 化 的 多 媒体 事件 数组 media_events， 逐 一 读 取 每 一 个 元 


然后 为 播放 的 视频 对 象 绑 定 事件 。 同 时 使 用 for 语句 把 每 个 寺 


Ph， 如 


0 图 7.15 所 示 。 


| function init events(id, arrayEventDef) { 


| varf: 
| 
| 
| 


for (key in arrayEventDef) { 
document. video.addEventListener(key. capture. false): 


sO 


件 的 当前 状态 值 汇集 并 
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» 
Var tbody = document.getElementById(id): 
vari= 1: 
var tr = null: 
for (key in arrayEventDef) { 
if(t—=nul])tr = document.createElement("tr"): 
Var th = document.createElement("th"): | 
th.textContent = key: | 
Var td = document.createElement("td"):; 
td.setAttribute("id", "e_" + key): 
td.textContent = "0": 
td.className = "false"; 
tr.appendChild(th): | 
tr.appendChild(td): | 
(t+%5)—=0){ | 
tbody.appendChild(tr): 
tr= mull; 
} | 


} | 
if (tr != null) tbody.appendChild(tr): | 
} 


第 4 步 ,初始 化 属性 函数 ， 在 该 函数 中 根据 初始 化 的 多 媒体 属性 数组 media_properties， 逐 一 读 取 每 一 
个 元 素 所 存储 的 属性 ， 然 后 使 用 do 语句 把 每 一 个 属性 值 显示 在 页 面 表格 中 ， 如 图 7.15 所 示 | 


function init_ properties(id. arrayPropDef arrayProp) { 
var tbody = document.getElementById(id); 


vari=0; | 
var tr = null; 
dof 


if (t=—=nulD)tr =document.createElement("tr"); 
Var th = document.createElement("th"); 
th.textContent = arrayPropDeffi]: | 
var td = document.createElement("td"): | 
VaTT; | 
td.setAttribute("id", "p_" + arrayPropDeffi]): 
r= eval("document. video." + arrayPropDef[i]): 
td.textContent =1; 
让 (typeofD != "undefined") { 
td.className = "true"; | 
} else { | 
td.className = "false": | 
} | 
tr.appendChild(th): 
tr.appendChild(td): 
arrayProp[i] = td: 
(+Hi1%3)—=0){ 
tbody.appendChild(tr): 
tr= nll: | 
} | 
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| 
| 
| 
| } while (i < arrayPropDef length): 
| if (tr (= null) tbodyappendChild(tD: 
| } 
| 
次 | 
| 第 5 步 ， 定 义 页 面 初始 化 函数 ， 在 该 函数 init0 中 ， 获 取 页 面 中 的 视频 播放 控件 ， 然 后 调用 init_eventsO 
‘Note 和 init_properties() 函数 ， 同 时 使 用 定时 器 ， 定 义 每 隔 250ms 将 调用 一 次 update_ properties0， 该 函数 将 不 断 
| 刷新 多 媒体 属性 值 ， 并 动态 显示 出 来 。 


| 
| function initO { 

| document. video = document.getElementById("video"); 

| webm = document.getElementById("webm"): 

| media_properties elts = new Array(media_properties.length): 

| init_events("events", media_events); 

| init_ properties("properties" media_properties, media_properties elts); 
| init_mediatypes(); 

| setInterval(update_properties, 250): 


7.7 在 线 练习 


多 媒体 已 成 为 网 站 的 必 备 元 素 ， 使 用 多 媒体 可 以 丰富 网 站 的 效果 ， 丰 富 网 站 的 内 容 ， 给 人 充实 的 视觉 
| 体验 ， 体 现 网 站 的 个 性 化 服务 ， 吸 引用 户 的 回流 ， 突 出 网 站 和 本 节 将 通过 大 量 的 上 机 练习 ， 帮 助 初 
| 学 者 学 习 使 用 HTML5 多 媒体 API 丰富 页 面 信息 。 


= 


和 = 
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使 用 CSS3 定义 版 式 


(路 u 视频 讲解 : 40 分 钟 ) 


网 页 版 式 一 般 通 过 栏目 的 行 、 列 组 合 米 设计 ， 根 据 移 动 网 页 效果 确定 ， 而 不 是 


HTML 结构 ， 如 单行 版 式 、 两 行 版 式 、 三 行 版 式 、 多 行 版 式 、 单 列 版 式 、 两 列 版 式 、 三 
列 版 式 等 。 也 可 以 根据 栏目 显示 性 质 进行 设计 ， 如 流动 布局 、 浮 动 布局 、 定 位 布局 、 混 
合 布 局 等 。 或 者 根据 网 页 宽度 进行 设计 ， 如 固定 宽度 、 弹 性 宽度 等 。 本 章 将 具体 讲解 
CSS3 定义 版 式 的 基本 方法 。 


【学 习 重 点 】 

WI 了 解 网 页 布局 的 基本 概念 。 

WI 熟 悉 CSS 使 模型 。 

MDI 掌握 CSS 布局 的 基本 方法 。 

MI 能 够 灵活 设计 常规 的 网 页 布局 效果 。 


7mss 和 Wit 生发 愉 入 门 到 精通 ( 微 课 精 编 版 ) 


8.1 CSS 盒 模 弄 


视频 讲解 


盒 模型 是 CSS 布局 的 核心 概念 。 了 解 CSS 盒 模型 的 结构 、 用 法 ， 对 于 网 页 布局 很 重要 ， 本 节 将 介绍 
| CSS 盒 模型 的 构成 要 素 和 使 用 技巧 。 
| 


8.1.1 认识 display 
| 
| 在 默认 状态 下 ， 网 页 中 每 个 元 素 都 显示 为 特定 的 类 型 。 例 如 ，div 元 素 显 示 为 块 状 ，span 元 素 显示 为 内 
| 联 状 。 
| 使 用 CSS 的 display 属性 可 以 改变 元 素 的 显示 类 型 ， 用 法 如 下 。 
| display: none | 
| inline | block | inline-block | 
| list-item | 
| table | inline-table | table-caption | table-cell | table-row | table-row-group | 
| table-column | table-column-group | table-footer-group | table-header-group | 
| run-in | 
| box | inline-box | flexbox | inline-flexbox | flex | inline-flex 
| display 属性 取 值 非常 多 ， 在 上 面 的 语法 中 第 3、4 行 取 值 不 是 很 常用 , 第 5、6 行 为 CSS3 新 增 类 型 ， 
| 详细 说 明 请 读者 参考 CSS3 参考 手册 ， 比 较 常用 的 属性 取 值 说 明 如 下 。 
回 none: 隐藏 对 象 。 与 visibility: hidden 不 同 ， 其 不 为 被 隐藏 的 对 象 保 留 物 理 空间 。 
回 inline: 指定 对 象 为 内 联 元 素 。 
回 block: 指定 对 象 为 块 元 素 。 
回 inline-block: 指定 对 象 为 内 联 块 元 素 。 
| block 以 块 状 显示 ， 占 据 一 行 ， 一 行 只 能 够 显示 一 个 块 元 素 ， 它 适合 搭建 文档 框架 ; inline 以 内 联 显示 ， 
| 可 以 并 列 显 示 ， 一 行 可 以 显示 多 个 内 联 元 素 ， 它 适合 包 庄 多 个 对 象 ， 或 者 为 行内 信息 定制 样式 。 
| 如 果 设 置 span 元 素 显示 为 块 状 效果 ， 只 需 定义 如 下 样式 。 


span { display:block: } 启 定 义 行内 元 素 块 状 显 示 */ 
如 果 设 置 div 以 行内 元 素 显示 ， 则 可 以 使 用 如 下 样式 进行 定义 。 
div { display:inline; } 启 定 义 块 状元 素 行 内 显示 */ 


8.1.2 认识 CSS 会 模型 


| 

| CSS 盒 模型 定义 了 网 页 对 象 的 基本 显示 结构 。 根 据 CSS 盒 模型 ， 网 页 中 的 每 个 元 素 都 显示 为 方形 ， 从 
| 结构 上 分 析 ， 它 包括 内 容 ( content )、 填 充 (padding )、 边 框 (border )、 边 界 ( margin )，CSS 盒 模 型 基本 结 
| 构 如 图 8.1 所 示 。 

内 容 ( content ) 就 是 元 素 包 含 的 对 象 ， 填充 (padding ) 就 是 控制 所 包含 对 象 在 元 素 中 的 显示 位 置 , 边 
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框 (border ) 就 是 元 素 的 边线 ,边界 ( margin ) 就 是 控制 当前 元 素 在 外 部 环境 中 的 显示 位 置 。 


上 边界 


项 部 填充 


底部 填充 


下 边界 


图 8.1 CSS 盒 模型 基本 结构 


8.1.3 定义 边界 


使 用 CSS 的 margin 属性 可 以 为 元 素 定义 边界 。 由 margin 属性 又 派生 出 如 下 4 个子 属性 。 
回 margin-top ( 顶部 边界 ) 

回 margin-right ( 右 侧 边界 ) 

回 margin-bottom ( 底部 边界 ) 

回 margin-left ( 左 侧 边界 ) 

这 些 属性 分 别 控制 元 素 在 不 同方 位 上 与 其 他 元 素 的 间距 。 


【示例 1】 下 面 的 示例 设计 了 4 个 盒子 ， 通 过 设置 不 同方 向 上 的 边界 值 ， 来 调整 它们 在 页 面 中 的 显示 位 | 


如 图 8.2 所 示 。 通 过 本 例 演示 ， 读 者 能 够 体会 到 边界 可 以 自由 设置 ， 且 各 边 边 界 不 会 相互 影响 。 


<style type="text/css"> 
div { 上方 统 一 4 个 盒子 的 默认 样式 */ 

display: inline-block: 

height: 80px: width:80px: 六 统一 大 小 %% 

border: solid 1px red: 片 统一 边框 样式 *#/ 
} 
#box1 {margin-top: 10px: margin-right: 8em: margin-left: 8em:} /* 第 1 个 盒子 样式 */ 
#box2 {margin-top: 10px: margin-right: 6em: margin-left: 6em:} /* 第 2 个 盒子 样式 */ 
#box3 {margin-top: 20px: margin-right: 4em: margin-left: 4em:} /* 第 3 个 盒子 样式 */ 
#box4 {margin-top: 20px: margin-right: 2em: margin-left: 2em:} /* 第 3 个 盒子 样式 */ 
</style> 
<div id="box1"> 盒子 1</div> 
<div id="box2"> 盒子 2</div> 
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<div id="box3"> 盒子 3</div> 
<div id="box4"> 盒子 4</div> 
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图 8.2 设置 盒子 的 边界 


这 提示 : 如 果 四 边 边界 相同 ， 则 直接 为 margin 定义 一 个 值 即 可 。 
如 果 四 边 边界 不 相同 ， 则 可 以 为 margin 定义 4 个 值 ，4 个 值 用 空格 进行 分 隔 ， 代 表 边 的 顺序 是 
顶部 、 右 侧 、 底 部 和 左 侧 。 例 如 : 
margin:top right bottom left: 
如 果 上 下 边界 不 同 ， 左 右边 界 相同 ， 则 可 以 使 用 以 下 3 个 值 定义 。 
Iargin:top right bottom:; 
如 果 上 下 边界 相同 ， 左 右边 界 相同 ， 则 直接 使 用 两 个 值 进行 代替 ， 第 一 个 值 表示 上 下 边界 ， 第 
二 个 值 表 示 左 右边 界 。 例 如 : 
p{ margin:12px 24pX:} 
margin 可 以 取 负 值 ， 这 样 就 能 够 强迫 元 素 偏 移 原来 位 置 ， 实 现 相 对 定位 功能 ， 利 用 margin 的 这 
个 功能 ， 可 以 设计 复杂 的 页 面 布局 效果 ， 下 面 的 章节 会 介绍 具体 的 演示 案例 。 
注意 ， 流 动 的 块 状元 素 存在 上 下 边界 重 登 现象 ， 这 种 重 登 将 以 最 大 边界 代替 最 小 边界 作为 上 下 
两 个 元 素 的 距离 。 


【示例 2】 下 面 的 示例 定义 了 上 面 盒子 的 底部 边界 为 50 像素 ， 下 面 盒子 的 顶部 边界 为 30 像素 ， 如 果 不 
考虑 重 倒 ， 则 上 下 元 素 的 间距 应 该 为 80 像素 ， 而 实际 距离 为 50 像素 ， 如 图 8.3 所 示 。 


<style type="text/css"> 

div { height: 20px: border: solid 1px red:} 
#boxl1 { margin-bottom: SO0px: } 

#box2 { margin-top: 30px: } 

</style> 

<div id="box1"></div> 

<div id="box2"></div> 


su 


相 邻 元 素 的 左右 边界 一 般 不 会 发 4 
于 浮动 元 素来 说 ， 
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(a ) 下 面 盒子 的 顶 边界 


8.1.4 定义 边框 


使 用 CSS 的 border 属性 可 以 定义 边框 样式 ， 


回 
回 
回 
回 


边界 的 作用 是 调整 当前 元 素 与 其 他 元 素 的 距离 ， 


隔 线 。 


border-top ( 顶部 边框 ) 
borderright ( 右 侧 边框 ) 
border-bottom ( 底部 边框 ) 
border-left ( 左 侧 边 框 ) 


图 8.3 


(b ) 上 面 盒子 的 底 边界 


上 下 元 素 的 重合 现象 


E 重 着 。 而 对 于 行内 元 素来 说 ， 上 下 边界 是 不 会 产生 
一 般 相 邻 浮动 元 素 的 边界 也 不 会 发 生 重 县 。 


与 边界 一 样 可 以 为 各 边 定义 独立 的 边框 样式 。 


而 边框 的 作用 就 是 划 定 当前 元 素 与 其 他 元 素 之 间 的 分 


E 任 何 效果 的 。 对 


边框 包括 3 个 子 属性 : border-style ( 边框 样式 )、border-color ( 边框 颜色 ) 和 border-width ( 边框 宽度 )。 
三 者 关系 比较 紧密 ， 如 果 没 有 定义 border-style 属性 ， 所 定义 的 border-color 和 border-width 属性 是 无 效 的 。 
反之 ， 如 果 没 有 定义 border-color 和 border-width 属性 ， 定 义 border-style 也 是 没有 用 的 。 

不 同 浏览 器 为 border-width 设置 了 默认 值 ( 默认 为 medium 关键 字 )。mediun 关键 字 大 约 等 于 
( 视 不 同 浏览 器 而 定 )， 另 外 还 包括 thin ( 1~2 像素 ) 关键 字 和 thick ( 3~5 像素 ) 关键 字 


border-color 默认 值 为 黑色 。 当 为 元 素 定义 border-style 属性 时 ， 则 浏览 吕 能 够 正常 显示 边框 效 果 。 


border-style 属性 取 值 比较 多 ， 简 单 说 明 如 下 。 
none: 无 轮廓 。border-color 与 border-width 将 被 忽略 。 
hidden: 隐藏 边框 。IE7 及 以 下 版 本 尚 不 支持 。 
dotted: 点 状 轮廓 。IE6 下 显示 为 dashed 效果 。 


办 办 办 办 办 办 办 办 罗 


dashed: 虚线 轮廓 。 
solid: 实 线 轮廓 。 


double: 双 线 轮廓 。 两 条 单线 与 其 间隔 的 和 等 于 指定 的 border-width 值 。 


groove: 3D 凹 槽 轮廓 。 
ridge: 3D 凸 槽 轮廓 。 
inset: 3D 凹 边 轮廓 。 

outset: 3D 凸 边 轮廓 。 
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这 提示 : solid 属性 值 是 最 常用 的 ， 而 dotted、dashed 也 是 常用 样式 。double 关键 字 比 较 特殊 ， 它 定义 边 


框 显示 为 双 线 ， 在 外 单线 和 内 单线 之 间 是 有 一 定 宽度 的 间距 。 其 中 内 单线 、 外 单线 和 间距 之 和 
必须 等 于 border-width 属性 值 。 


【示例 】 下 面 的 示例 比较 了 当 border-style 属性 设置 不 同 值 时 所 呈现 出 的 效果 ， 在 正 和 Firefox 浏览 器 
解析 的 效果 如 图 8.4 和 图 8.5 所 示 。 


<style type="text/css"> 

#p1 {border-style:solid: } 
#p2 {border-style:dashed: } 
#p3 { border-style:dotted: } 
#p4 { border-style:double: } 
#p5 { border-style:groove: } 
#p6 { border-style:ridge: } 
#p7 { border-style:inset; } 
#p8 { border-style:outset; } 
</style> 


pe 


启 实 线 效 果 # 
语 虚 线 效 果 # 
启 点 线 效 果 洒 
店 双 线 效果 
让 3D 凹 槽 效果 */ 
店 3D 凸 槽 效果 */ 
谨 3D 止 边 效果 */ 
谨 3D 凸 边 效 果 */ 


<p id="p1"> 元 1 { border-style:solid; }</p> 
<p id="p2">#p2 { border-style:dashed; }</p> 
<p id="p3">#p3 { border-style:dotted; }</p> 
<p id="p4">#p4 { border-style:double; }</p> 
<p id="p5">#p5 { border-style:groove: }</p> 
<p id="p6">#p6 { border-style:ridge; }</p> 
<p id="p7">#p7 { border-style:inset; }</p> 
<p id="p8">#p8 { border-style:outset; }</p> 


专 图 oalhosymystenesthm 轩 中 了 C]| 回 -se 5 有 | 三 


Bp4 {border-style:double; } 
Bp5 {border-styie:groove;} 

Bpetbordersyleridge) | 
Epstbadersyeoust | 


图 8.4 正 下 边框 的 边框 样式 显示 效果 图 8.5 Firefox 下 边框 的 边框 样式 显示 效果 


8.1.5 ”定义 补 白 


使 用 CSS 的 padding 属性 可 以 定义 补 白 ， 它 用 来 调整 元 素 包含 的 内 容 与 元 素 边框 的 距离 。 从 功能 上 讲 ， 
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| 
| 
补 白 不 会 影响 元 素 的 大 小 ， 但 是 由 于 在 布局 中 补 白 同样 占据 空间 ， 所 以 在 布局 时 应 起 补 自 革 于 布 局 的 有 | 
响 。 如 果 在 没有 明确 定义 元 素 的 宽度 和 高 度 的 情况 下 ， 使 用 补 白 来 调整 元 素 内 容 的 显示 位 置 要 比 边界 更 加 
安全 、 可 靠 。 y 
padding 与 margin 属性 一 样 ， 不 仅 可 以 快速 简写 ， 还 可 以 利用 padding-top、padding-right、padding- | 
bottom 和 padding-left 属性 来 分 别 定义 四 边 的 补 白 大 小 。 
【示例 1】 下 面 的 示例 设计 了 段落 文本 左 侧 空 出 4 个 字体 大 小 的 距离 ， 此 时 由 于 没有 定义 段落 的 宽度 ，| 
所 以 使 用 padding 属性 来 实现 会 非常 恰当 ， 如 图 8.6 所 示 。 
<style type="text/css"> 


pt 
border: solid 1px red: 依 边 框 样式 */ 
padding-left 4em: 片 左 侧 补 白 */ 
: 
</style> 


<p> 今天 很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 ， 但 绝 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 放弃 今天 。 </p> 


| 
| 
| 
| 
绝 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 | 
放弃 今天 。 
图 8.6 补 白 影响 文本 在 段落 中 的 显示 位 置 | 
| 
洲 提示 : 由 于 补 白 不 会 发 生 重 本 ， 当 元 素 没有 定义 边框 的 情况 下 ， 以 padding 属性 来 替代 inargin 属性 来 | 
定义 元 素 之 间 的 间距 是 一 个 比较 不 错 的 选择 。 
由 于 行内 元 素 定义 的 width 和 height 属性 值 无 效 ， 所 以 可 以 利用 补 白 来 定义 行内 元 素 的 高 度 和 | 

宽度 ， 以 便 能 够 撑 开 行内 元 素 。 


【示例 2】 下面 的 示例 使 用 padding 属性 定义 了 行内 元 素 的 显示 高 度 和 显示 宽度 ， 如 图 8.7 所 示 ， 如 果 | 
没有 定义 补 白 ， 会 发 现行 内 元 素 的 背景 图 缩小 到 了 隐藏 状态 ， 如 图 8.8 所 示 。 


<style type="text/css"> 

af 
background-image:url(images/back.png): 语 定 义 背 景 图 所 
background-repeat:no-repeat; 广 禁 止 背景 平 铺 */ 
padding:51px: 启 通 过 补 白 定义 高 度 和 宽度 */ 
line-height:0:; 广 设 置 行 高 为 0 */ 
display:inline-block: 上 证 行内 块 显示 */ 
text-indent:-999px: 上 证 隐藏 文本 */ 

} 

</style> 


<a href="#" title=" 返回 "> 返回 </a> 


-rs 


并 列 
| 本身 


| 也 就 
| 
| 盒子 
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图 8.7 使 用 补 白 来 定义 元 素 的 显示 高 度 和 宽度 图 8.8 没有 补 白 的 情况 下 的 显示 效果 


8.2 设计 浮动 显示 


浮动 是 一 种 特殊 的 显示 方式 ， 它 能 够 让 元 素 向 左 或 向 右 停靠 显示 ， 是 在 传统 CSS 布局 中 用 来 设计 多 栏 
版 式 的 主要 方法 ， 主 要 针对 块 元 素来 说 的 ， 因 为 CSS 布局 主要 使 用 块 元 素 ， 而 内 联 元 素 、 内 联 块 元 素 
就 可 以 实现 左右 对 齐 、 并 列 显 示 。 


.1 定义 float 


使 用 CSS 的 float 属性 可 以 定义 元 素 浮动 显示 ， 用 法 如 下 


float: none | lef | right 


默认 值 为 none， 取 值 说 明 如 下 。 

回 none: 设置 对 象 不 浮动 。 

回 left: 设置 对 象 浮 在 左边 。 

回 right: 设置 对 象 浮 在 右边 。 

当 该 属性 不 等 于 none 引起 对 象 浮动 时 ， 对 象 将 被 视 作 块 对 象 ， 相 当 于 声明 了 display 属性 等 于 block。 
是 说 ， 浮 动 对 象 的 display 特性 将 被 忽略 。 该 属性 可 以 被 应 用 在 非 绝 对 定位 的 任何 元 素 上 。 

【示例 1】 在 页 面 中 设计 3 个 盒子 ， 统 一 大 小 为 200 像素 x 300 像素 ,边框 为 2 像素 宽 的 红线 。 在 默认 
下 ,这 3 个 盒子 以 流动 方式 堆 秋 显示 ， 根 据 HTML 结构 的 排列 顺序 自 上 而 下 进行 排列 。 如 果 定 义 3 个 


都 向 左 浮动 ， 则 3 个 盒子 并 列 显示 在 一 行 ， 如 图 8.9 所 示 。 
<style type="text/css"> 
div {/* div 元 素 基 本 样式 */ 
width: 200px: 上 固定 宽度 */ 
height: 300px: 让 固定 高 度 */ 
border: solid 2px red: 广 边 框 样式 */ 
margin: 4px: 店 增 加 外 边界 */ 
上 
div { float: left; }/* 定义 所 有 div 元 素 都 向 左 浮动 显示 BB 
</style> 


<div id="box1"> 盒子 1</div> 
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<div id="box2"> 盒子 2</div> 
<div id="box3"> 盒子 3</div> 


如 果 不 断 缩小 窗口 宽度 ， 会 发 现 随 着 窗口 宽度 的 缩小 ， 当 窗口 宽度 小 于 并 行 浮动 元 素 的 总 宽度 之 和 时 ， | 


会 自动 换行 显示 ， 如 图 8.10 所 示 。 


图 8.9 并 列 浮动 图 8.10 错位 浮动 


< 的 注意 : 当 多 个 元 素 并 列 浮动 时 ， 浮 动 元 素 的 位 置 是 不 固定 的 ， 它 们 会 根据 父 元 素 的 宽度 灵活 调整 。 这 | 


为 页 面 布 局 带 来 隐患 。 


解决 方法 : 定义 包含 框 的 宽度 为 固定 值 ， 避 人 免 包 含 框 的 宽度 随 窗 口 大 小 而 改变 。 例 如 ， 以 上 面 示例 为 | 
基础 ， 如 果 定 义 body 元 素 宽度 固定 ， 此 时 会 发 现 无 论 怎 么 调整 窗口 大 小 都 不 会 出 现 浮动 元 素 错位 的 现象 ， 


如 图 8.11 所 示 。 


body { 
width:636px; * 固定 父 元 素 的 宽度 */ 
border:solid 1px blue; 上 # 为 父 元 素 定义 边框 ， 以 便 观 察 */ 


【示例 2】 设 计 3 个 盒子 以 不 同方 向 进行 浮动 ， 则 它们 还 会 遵循 上 述 所 列 的 浮动 显示 原则 。 
第 1、2 个 盒子 向 左 浮动 ， 第 3 个 盒子 向 右 浮动 ， 如 图 8.12 所 示 。 

#box1, #box2 { float: left: 上 # 向 左 浮动 */} 

#box3 { float: right: 语 向 右 浮动 */}》 


”ETP 


例如 ,定义 | 
| 


车 3 


图 8.11 不 错位 的 浮动 布局 图 8.12 ”浮动 方向 不 同 的 布局 效果 


“209s 


Eee [xie 和 up 开 下 从 和 m 到 类 和 ( 微 课 精 编 版 ) 


| 如 果 取 消 定义 浮动 元 素 的 大 小 ,会 发 现 每 个 盒子 都 会 自动 收缩 到 仅 能 包含 对 象 的 大 小 。 这 说 明 浮 动 元 
素 有 自动 收缩 空间 的 功能 ， 而 块 状元 素 就 没有 这 个 特性 ， 在 没有 定义 宽度 的 情况 下 ， 宽 度 会 显示 为 100%。 
【示例 3】 如 果 浮动 元 素 内 部 没有 包含 内 容 ， 这 时 元 素 会 收缩 为 一 点 ， 如 图 8.13 所 示 。 但 是 对 于 正 怪 

| 异 模 式 来 说 ， 则 会 收缩 为 一 条 竖 线 ， 这 是 因为 正 有 默认 行 高 ， 如 图 8.14 所 示 。 


‘Note <style type="text/css"> 


<div id="box1"></div> 
<div id="box2"></div> 
<div id="box3"></div> 


div{ 
| border: solid 2px red: 片 边框 样式 */ 
| margin: 4px: 此 增加 外 边界 */ 
| float: left: 让 向 左 浮动 */ 
| 
| </style> 
| 
| 
| 
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图 8.13 正 标 准 模式 下 浮动 自动 收缩 为 点 图 8.14 正 怪 异 模式 下 浮动 收缩 为 一 条 竖 线 


次 提示 : 元 素 浮动 显示 之 后 ， 它 会 改变 显示 顺序 和 位 置 ， 但 是 不 会 脱离 文档 流 ， 其 前 面 对 象 的 大 小 和 位 
置 发 生变 化 ， 也 会 影响 浮动 元 素 的 显示 位 置 。 


| float 元 素 能 够 并 列 在 一 行 显示 ， 除 了 可 以 通过 调整 包含 框 的 宽度 ， 来 强迫 浮动 元 素 换行 显示 外 ， 还 可 
| 以 使 用 clear 属性 ， 该 属性 能 够 强迫 浮动 元 素 换行 显示 ， 用 法 如 下 。 
clear: none | left | right | both 


| 
| 
| 
| 
| 默认 值 为 none， 取 值 说 明 如 下 。 
| 


回 none: 允许 两 边 都 可 以 有 浮动 对 象 。 

回 both: 不 允许 有 浮动 对 象 。 

回 left: 不 允许 左边 有 浮动 对 象 。 

回 right: 不 允许 右边 有 浮动 对 象 。 

| 【示例 1】 下 面 的 示例 定义 了 3 个 盒子 都 向 左 浮动 ， 然 后 定义 第 2 个 盒子 清除 左 侧 浮动 ， 这 样 它 就 不 能 
| 够 排列 在 第 1 个 盒子 的 右 侧 ， 而 是 换行 显示 在 第 1 个 盒子 的 下 方 , 但 是 第 3 个 盒子 由 于 没有 设置 清除 属性 ， 
| 所 以 它 会 向 上 浮动 到 第 1 个 盒子 的 右 侧 ， 如 图 8.15 所 示 。 
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<style type="text/css"> 


div{ 
width: 200px: 语 固定 宽度 */ 
height: 200px: 启 固定 高 度 *#/ 
border: solid 2px red: 广 边 框 样式 */ 
margin: 4px: 语 边 界 距离 */ 
float: left: 广 向 左 浮动 */ 

} 

#box2 { clear: left: } 让 清除 向 左 浮动 */ 

</style> 


<div id="box1"> 盒子 1</div> 
<div id="box2"> 盒子 2</div> 
<div id="box3"> 盒子 3</div> 


如 果 定义 第 2 个 盒子 清除 右 侧 浮动 ， 会 发 现 它们 依然 显示 在 一 行 ， 如 图 8.16 所 示 。 说 明 第 2 个 盒子 在 | 


解析 时 ， 第 3 个 盒子 还 没有 出 现 ， 因 此 当 第 3 个 盒子 浮动 显示 时 ， 不 会 受到 clear 影响 。 


图 8.15 为 第 2 个 盒子 定义 清除 左 侧 浮动 对 象 图 8.16 为 第 2 个 盒子 定义 清除 右 侧 浮动 对 象 


【示例 2】clear 不 仅 影响 浮动 元 素 ， 还 对 块 元 素 产生 影响 。 例 如 ， 禁 止 块 状元 素 与 浮动 元 素 重 春 显示 ，| 
则 可 以 使 用 如 下 样式 ， 为 浮动 元 素 后 面 的 块 元 素 定义 clear 属性 ， 如 图 8.17 所 示 。 | 
<style type="text/css"> 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
border: solid 2px red: 语 边 框 样式 */ | 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


div{ 
width: 200px: 记 固定 宽度 */ 
height: 200px: 请 固定 高 度 */ 
margin: 4px: 上 证 边界 距离 */ 
float: left: 访 向 左 浮动 */ 

#box3 {/* 清除 第 3 个 盒子 浮动 显示 ， 同 时 定义 左 侧 不 要 有 浮动 元 素 */ 
float: none: 上 记 禁 止 浮动 */ 
clear: left: 上 清除 左 侧 浮动 */ 

</style> 


<div id="box1"> 盒子 1</div> | 
<div id="box2"> 盒子 2</div> | 
<div id="box3"> 盒子 3</div> | 


.211 。 
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| (a ) 为 盒子 3 定义 clear: left: (b ) 不 为 盒子 3 定义 clear left; 

| 图 8.17 清除 块 元 素 左 侧 浮动 对 象 

| 

| 【示例 3】 在 正 怪 异 模式 下 ,使 用 clear 还 可 以 禁止 文本 环绕 版 式 。 例 如 ， 在 下 面 的 图 文 混 排 版 式 中 ， 
| 为 文本 信息 元 素 span 定义 clear: left; 样式 ， 可 以 看 到 文本 被 迫 换行 显示 ， 效 果 如 图 8.18 所 示 。 
| 

| 

| 


<style type="text/css"> 


#box img { 
float: left: 此 让 图 像 向 左 浮动 */ 
width: 300px:} 
#box span { clear left; } 广 清 除 左 侧 浮动 对 象 */ 
</style> 


<div id="box"> <img src="images/1.png" alt=""/><span> 棱镜 事件 的 主角 斯 诺 登 透露 的 资料 显示 ， 众 多 科技 公司 曾 与 美 
国政 府 合作 ， 帮 助 美国 国家 安全 局 获得 互联 网 上 的 加 密 文件 数据 。 由 于 操作 系统 关系 到 国家 的 信息 安全 ， 目 
前 俄罗斯 、 德 国 等 国家 已 经 推行 在 政府 部 门 的 电脑 中 采用 本 国 的 操作 系统 软件 -Windows 8 和 Vista 是 同类 架构 ， 
而 且 Windows 8 还 捆绑 了 微软 的 杀毒 软件 ， 它 时 时 刻 刻 都 在 检查 用 户 电脑 ， 扫 描 数据 信息 。</span></div> 
</div> 


(a) 正人 怪异 模式 下 的 效果 (b ) 正 标准 模式 下 的 效果 
| 图 8.18 正人 怪异 模式 支持 的 非 浮动 对 象 清除 特性 
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8.3 设计 定位 显示 
定位 也 是 一 种 特殊 的 显示 方式 ， 它 能 够 让 元 素 脱离 文档 流 ， 实 现 相 对 偏 移 ， 或 者 精准 显示 。 


8.3.1 定义 position 


使 用 CSS 的 position 属性 可 以 定义 元 素 定位 显示 ， 用 法 如 下 。 


position: static | relative | absolute | fixed 


默认 值 为 static， 取 值 说 明 如 下 。 

回 static: 无 特殊 定位 ， 对 象 遵 循 正常 文档 流 。top、right、bottom、left 等 属性 不 会 被 应 用 。 | 

回 relative: 对 象 遵循 正常 文档 流 ， 但 将 依据 top 、right、bottom 、left 等 属性 在 正常 文档 流 中 偏 移 位 置 。 

回 absolute: 对 象 脱离 正常 文档 流 ， 使 用 top 、right、bottom 、left 等 属性 进行 绝对 定位 ， 其 层 番 顺序 
通过 z-index 属性 定义 。 

回 fixed: 对 象 脱离 正常 文档 流 ， 使 用 top 、right、bottom 、left 等 属性 以 窗口 为 参考 点 进行 定位 ， 当 出 
现 滚动 条 时 ， 对 象 不 会 随 之 滚动 。 

3 position 属性 相关 联 的 是 如 下 4 个 定位 属性 。 

top: 设置 对 象 与 其 最 近 一 个 定位 包含 框 顶部 相关 的 位 置 。 

right: 设置 对 象 与 其 最 近 一 个 定位 包含 框 右边 相关 的 位 置 。 

bottom: 设置 对 象 与 其 最 近 一 个 定位 包含 框 底部 相关 的 位 置 。 | 

left: 设置 对 象 与 其 最 近 一 个 定位 包含 框 左 侧 相关 的 位 置 。 | 

上 面 4 个 属性 值 可 以 是 长 度 值 ， 或 者 是 百分比 值 ， 可 以 为 正 ， 也 可 以 为 负 。 当 取 负 值 时 ， 向 相反 方向 | 

偏 移 ， 默 认 值 都 为 auto。 | 
【示例 1】 下面 的 示例 定义 3 个 盒子 都 为 绝对 定位 显示 ， 并 使 用 left、right、top 和 bottom 属性 定义 元 素 | 

的 坐标 ， 显 示 效 果 如 图 8.19 所 示 。 | 


办 多多 凶 十 


<style type="text/css"> 
body {padding: 0; /* 兼容 非 正 浏览 器 */ 
margin: 0: /+ 兼容 正 浏览 器 */ 


| 

| 

| 

} * 清除 页 边 距 */ | 
div{ | 
width: 200px: 上 * 固定 元 素 的 宽度 */ | 
height: 100px: /* 固定 元 素 的 高 度 */ | 
border: solid 2px red: 上 # 边 框 样式 */ | 
position: absolute: 庆 绝 对 定位 专 | 

) 
#boxl { | 
left: 50px: 让 距 左 侧 窗口 的 距离 为 50 像素 */ | 
top: SOpx: 片 距 顶 部 窗口 的 距离 为 50 像素 */ | 

上 | 
#box2 { left: 40%6: } 上 广 距 左 侧 窗 口 的 距离 为 窗口 宽度 的 40% */ | 
#box3 { | 
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Tight: S0px: 广 距 右 侧 窗口 的 距离 为 50 像素 */ 
bottom: 50px 广 距 底部 窗口 的 距离 为 50 像素 */ 
} 
</style> 


<div id="box1"> 盒子 1</div> 
<div id="box2"> 盒子 2</div> 
<div id="box3"> 盒子 3</div> 
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图 8.19 相对 于 窗口 定位 元 素 


<4 角 注意 : 在 定位 布局 中 ， 有 一 个 很 重要 的 概念 : 定位 包含 框 。 定 位 包含 框 不 同 于 结构 包含 框 ， 它 定义 了 
所 包含 的 绝对 定位 元 素 的 坐标 参考 对 象 。 凡 是 被 定义 相对 定位 、 绝 对 定位 或 固定 定位 的 元 素 都 
会 拥有 定位 包含 框 的 功能 。 如 果 没有 明确 指定 定位 包含 框 ， 则 将 以 body 作为 定位 包含 框 ， 即 
以 窗口 四 边 为 定位 参照 系 。 


【示例 2】 在 上 面 的 示例 基础 上 ， 把 第 2、3 个 盒子 锯 在 <div id="wrap"> 标签 中 ， 然 后 定义 <div id= 
"wrap"> 标签 相对 定位 ( position:relative; )， 于 是 它 就 拥有 了 定位 包含 框 的 功能 ， 此 时 第 2、3 个 盒子 就 以 
<div id="wrap"> 四 边 作为 参考 系统 进行 定位 ， 效 果 如 图 8.20 所 示 。 

<style type="text/css"> 

body {padding: 0; 六 兼容 非 正 浏览 器 交 

margin: 0; 上 兼容 下 浏览 器 */ 


}* 清除 页 边 距 */ 
div{ 
width: 200px: 让 固定 元 素 的 宽度 */ 
height: 100px: 语 固定 元 素 的 高 度 */ 
border: solid 2px red: 广 边 框 样式 #/ 
position: absolute: 启 绝 对 定位 */ 
} 
#boxl { 
left: 50px: 片 距 左 侧 窗口 的 距离 为 50 像素 */ 
top: SOpx: 片 距 项 部 窗口 的 距离 为 50 像素 */ 
} 
#box?2 { left: 40%: } 广 距 左 侧 窗口 的 距离 为 窗口 宽度 的 40% */ 
#box3 { 
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Tight: SOpx: 
bottom: SOpx 
} 
#wrap {/* 定义 定位 包含 框 */ 
width:300px: 
height:200px: 
float:right; 
margin: 100px; 
border:solid 1px blue: 
position:relative; 
} 
</style> 
<div id="box1"> 盒子 1</div> 
<div id="wrap"> 
<div id="box2"> 盒子 2</div> 
<div id="box3"> 盒子 3</div> 
</div> 


相对 定位 定义 元 素 从 文档 流 中 的 原始 位 置 进行 偏 移 ， 但 是 定位 元 素 不 会 脱离 文档 。 而 对 于 绝对 定位 对 | 


睛 距 右 侧 窗口 的 距离 为 50 像素 */ 
让 距 底 部 窗口 的 距离 为 50 像素 */ 


店 定 义 定位 包含 框 的 宽度 */ 
启 定 义 定位 包含 框 的 高 度 */ 
刻 定 义 定位 包含 框 向 右 浮动 */ 
店 包 含 块 的 外 边界 */ 

族 边 框 样式 */ 

启 相 对 定位 */ 


图 8.20 ”相对 于 元 素 进行 定位 


象 来 说 ， 定 位 元 素 完 全 脱离 文档 流 ， 两 者 就 不 再 相互 影响 。 


使 用 相对 定位 可 以 纠正 元 素 在 流动 显示 中 的 位 置 偏差 ， 以 实现 更 恰当 的 显示 。 


【示例 3】 在 下 面 的 示例 中 ， 根 据 文档 流 的 正常 分 布 规律 ， 第 1、2、3 个 盒子 按 顺序 从 上 到 下 进行 分 布 ， 


下 面 设计 将 第 1 盒子 与 第 2 个 盒子 的 显示 位 置 进行 调换 ， 为 此 使 用 相对 定位 调整 它们 的 显示 位 置 ， 实 现 的 | 


代码 如 下 ， 所 得 的 效果 如 图 8.21 所 示 。 


<style type="text/css"> 
div{ 
width: 400px: 
height: 100px: 
border: solid 2px red: 
margin: 4px: 
position: relative: 


片 固定 宽度 显示 */ 
店 固定 高 度 显示 */ 
方 边框 样式 */ 

店 外 边界 距离 */ 
店 相 对 定位 */ 
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反 boxl { top: 108px: } 上 访 向 下 偏 移 显示 位 置 */ 
#box2 { top: -108px: } 片 向 上 偏 移 显示 位 置 */ 
</style> 


<div id="box1"> 盒子 1</div> 
<div id="box2"> 盒子 2</div> 
<div id="box3"> 盒子 3</div> 
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(a ) 默认 的 显示 位 置 (b ) 调换 之 后 的 显示 位 置 
图 8.21 使 用 相对 定位 调换 模块 的 显示 位 置 


| 相对 定位 更 多 地 被 用 来 当 作 定位 包含 框 ， 因 为 它 不 会 脱离 文档 流 。 另 外 ， 使 用 相对 定位 可 以 很 方便 地 
| 微调 文档 流 中 对 象 的 位 置 偏差 。 

| 固定 定位 就 是 定位 坐标 系统 始终 是 固定 的 ， 即 始终 以 浏览 器 窗口 边界 为 参照 物 进行 定位 。 

| 【示例 4】 下 面 的 示例 是 对 上 面 定位 包含 框 演示 示例 的 修改 ,修改 其 中 3 个 盒子 的 定位 方式 为 固定 定位 ， 
| 这 时 在 浏览 器 中 预览 ， 会 发 现 定位 包含 框 不 再 有 效 ， 固 定 定位 的 3 个 盒子 分 别 根据 窗口 来 定位 各 自 的 位 置 ， 


| 如 图 8.22 所 示 。 

| 

| <style type="text/css"> 

| div{ 

| width: 200px: 证 固定 元 素 的 宽度 */ 

| height: 100px: 片 固定 元 素 的 高 度 */ 

| border: solid 2px red: 上 # 边 框 样式 */ 

| position: fixed: 片 固定 定位 */ 

| 

| #boxl { 

| left: 50px: 片 距 左 侧 窗口 的 距离 为 50 像素 */ 
| top: SOpx: 片 距 顶部 窗口 的 距离 为 50 像素 */ 
| 

| oox2 {left: 40%: } 上 * 距 左 侧 窗口 的 距离 为 窗口 宽度 的 40% */ 
| #box3 { 

| Tight: 50px: 入 距 右 便 窗口 的 距离 为 50 像素 */ 
| bottom: 50px 上 # 距 底部 窗口 的 距离 为 50 像素 */ 
| 

| #wrap {/* 定义 定位 包含 框 */ 

| width: 300px: 店 定 义 定 位 包含 框 的 宽度 *#/ 
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height: 200px: 店 定 义 定位 包含 框 的 高 度 */ 
float: right: 片 定义 定位 包含 框 向 右 浮动 */ 
margin: 100px: 片 包 含 块 的 外 边界 */ 
border: solid 1px blue: 让 边 框 样式 */ 
position: relative: 启 相 对 定位 */ 

} 

</style> 

<div id="box1"> 盒子 1</div> 

<div id="wrap"> 


<div id="box2"> 盒子 2</div> 
<div id="box3"> 盒子 3</div> 
</div> 
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图 8.22 固定 定位 效果 


但 是 如 果 元 素 没有 被 定义 宽度 和 高 度 ， 则 元 素 将 会 被 拉 伸 以 适应 左右 或 上 下 同时 定位 。 


【示例 5】 在 下 面 的 示例 中 ， 分 别 为 绝对 定位 元 素 定 义 left、right、top 和 bottom 属性 ， 则 元 素 会 被 自动 


拉 伸 以 适应 这 种 四 边 定位 的 需要 ， 演 示 效 果 如 图 8.23 所 示 。 
<style type="text/css"> 


#boxl { 
border: solid 2px red: 广 边 框 样式 */ 
position: absolute: 谍 绝 对 定位 */ 
left: 50px: 片 左 侧 距离 */ 
Tight: 50px: 广 右 侧 距离 */ 
top: 50px: 上 庆 顶部 距离 */ 
bottom: S0px: 广 底 部 距离 *#/ 

} 

</style> 


<div id="box1"> 盒子 1</div> 


“ls 


从 提示 : 在 定位 布局 中 ， 如 果 left、right、top 和 bottom 同时 被 定义 ， 则 left 优 于 right，top 优 于 bottom。 ， 
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图 8.23 四边 同 时 定位 元 素 的 位 置 


不 管 是 相对 定位 、 固 定 定 位 ， 还 是 绝对 定位 ， 只 要 坐标 相同 都 可 能 存在 元 素 重 盖 现象。 在 默认 情况 下 ， 


机 类 弄 的 定位 排列 在 后 面 的 定位 元 素 会 槛 盖 前 面 的 定位 元 素 。 


【示例 1] 在 下 面 的 示例 中 ，3 个 盒子 都 是 相对 定位 ， 在 默认 状态 下 ， 它 们 将 按 顺 序 覆 盖 显 示 ， 如 图 


EE 24 所 示 。 


<style type="text/css"> 
div{ 
width: 200px: 
height: 100px: 
border: solid 2px red: 
position: Telative: 
} 
#boxl1 { background: red: } 
#box2 {* 第 2 个 盒子 样式 */ 
left: 60px: 
top: -SOpx: 
background: blue: 


) 
#box3 {l#* 第 3 个 盒子 样式 */ 
left: 120px: 
top: -100px:; 
background: green: 
> 
</style> 
<div id="box1"> 盒子 1</div> 
<div id="box2"> 盒子 2</div> 
<div id="box3"> 盒子 3</div> 


启 固定 宽度 */ 
让 固定 高 度 */ 
少 边 框 样式 */ 
启 相 对 定位 */ 


让 第 1 个 盒子 为 红色 背景 */ 


久 左 侧 距离 */ 
上 # 顶部 距离 */ 
刻 第 2 个 盒子 为 蓝 色 背景 */ 


刻 左 侧 距离 */ 
语 顶 部 距离 */ 
广 第 3 个 盒子 为 绿色 背景 */ 


使 用 CSS 的 z-index 属性 可 以 改变 定位 元 素 的 覆盖 顺序 。z-index 属性 取 值 为 整数 ， 数 值 越 大 就 越 显 示 
| [在 上 面 。 
【示例 2】 在 上 面 的 示例 基础 上 ， 分 别 为 3 个 盒子 定义 z-index 属性 值 ， 第 1 个 盒子 的 值 最 大 ， 所 以 它 


sles 
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就 层 秋 在 最 上 面 ， 而 第 3 个 盒子 的 值 最 小 ， 被 琶 放 在 最 下 面 ， 如 图 8.25 所 示 。 
#box] { z-index:3: } 
#box2 { z-index:2; } 
#box3 {z-index:1;} 
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图 8.24 ”默认 层 县 顺序 图 8.25 ”改变 层 伙 顺序 


如 果 z-index 属性 值 为 负 值 ， 则 将 隐藏 在 文档 流 的 下 面 | 
【示例 3】 在 下 面 的 示例 中 ， 定 义 div 元素 相对 定位 ， 并 设置 z-index 属性 值 为 -1， 显 示 效果 如 图 8.26 | 


所 示 | 
<style type="text/css"> | 
#boxl { | 

height: 400px: 语 固定 高 度 */ | 
position: relative; 上 # 相对 定位 */ | 
background: red url(images/1.jpg); 上 # 定 义 背景 色 和 背景 图 */ | 
z-index: -1; 店 层 王 顺 序 */ | 
top: -120px: 人 # 偏 移 位 置 */ | 
} | 
</style> | 


<p> 我 永远 相信 只 要 永 不 放弃 ,我 们 还 是 有 机 会 的 。 最 后 ,我 们 还 是 坚信 一 点 ， 这 世界 上 只 要 有 梦想 ， 只 要 不 断 | 
努力 ， 只 要 不 断 学 习 ， 不 管 你 长 得 如 何 ， 不 管 是 这 样 ， 还 是 那样 ， 男 人 的 长 相 往往 和 他 的 才华 成 反比 。 今 天 | 
很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 ， 但 绝对 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 放弃 今天 。</p> | 


<div id="box1"></div> 


| 
| 
| 
| 
OO Sm olen 5 | 
| 
| 
| 
| 
| 


图 8.26 定义 定位 元 素 显 示 在 文档 流下 面 | 
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8.4 案例 实战 


CSS 布局 比较 复杂 ， 为 了 帮助 读者 快速 入门 ， 本 节 通 过 几 个 案例 介绍 网 页 布局 的 基本 思路 、 方 法 和 技 
巧 。 当 然 ， 要 设计 精美 的 网 页 ， 不 仅仅 需要 技术 ， 更 需要 一 定 的 审美 和 艺术 功底 。 
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8.4.1 设计 两 栏 页 面 


本 节 示例 设计 导航 栏 与 其 他 栏 并 为 一 列 固定 在 右 侧 ， 主 栏 区 域 以 弹性 方式 显示 在 左 侧 ， 实 现 主 栏 自 适 
应 页 面 宽度 变化 ， 而 侧 栏 宽度 固定 不 变 的 版 式 效果 ， 版 式 结构 如 图 8.27 所 示 。 


<div id="container"> 


页 眉 区 域 (%) 


主 栏 区 域 (%) 


</div> 


图 8.27 版 式 结构 示意 图 


设计 思路 如 下 。 

如 果 完 全 使 用 浮动 布局 来 设计 主 栏 自 适应 、 侧 栏 固定 的 版 式 是 存在 很 大 难度 的 ， 因 为 百分比 取 值 是 一 
个 不 固定 的 宽度 ， 让 一 个 不 固定 宽度 的 栏目 与 一 个 固定 宽度 的 栏目 同时 浮动 在 一 行内 ， 采 用 简单 的 方法 是 
不 行 的 。 

这 里 设计 主 栏 100% 宽 度 ， 然 后 通过 左 外 边 距 取 负 值 强迫 栏目 偏 移出 一 列 的 空间 ， 最 后 把 这 个 腾 出 的 
区 域 让 给 右 侧 浮动 的 侧 栏 ， 从 而 达到 并 列 浮动 显示 的 目的 。 

当主 栏 左 外 边 距 取 负 值 时 ， 可 能 部 分 栏目 内 容 显 示 在 窗口 外 面 ,为 此 在 髋 套 的 子 元 素 中 设置 左 外 边 距 


第 1 步 ， 新 建 HIML 文档 ,保存 为 test.html。 
第 2 步 ， 设 计 文档 基本 结构 ， 包 含 5 个 模块 。 
<div id="container"> 
<div id="header"> 
<hl> 页 眉 区 域 <hl> 
</div> 
<div id="wrapper"> 
<div id="content"> 
<p><strong>1. 主体 内 容 区 域 </strong></p> 
</div> 
</div> 
<div id="navigation"> 
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<p><strong>2. 导航 栏 </strong></p> 
</div> 
<div id="extra"> 

<p><strong>3. 其 他 栏目 </strong></p> 


</div> 
<div id="footer"> 
<p> 页 脚 区 域 </p> 
</div> 
</div> 


第 3 步 , 使 用 style 元 素 定义 内 部 样式 表 ， 输入 下 面 的 样式 代码 ， 设 计 效 果 如 图 8.28 所 示 。 
div#wrapper {/* 主 栏 外 框 *#/ 


float:left: 语 向 左 浮动 */ 
width:100%; 让 弹性 宽度 */ 
margin-left:-200px 卡 左 侧 外 边 距 ， 负 值 向 左 缩 进 */ 
} 
div#content {/* 主 栏 内 框 */ 
margin-left:200px 谍 左 侧 外 边 距 ， 正 值 填充 缩 进 */ 
divfnavigation {/* 导航 栏 */ 
float:right: 谨 向 右 浮动 */ 
width:200px 语 固定 宽度 */ 
div#extra {/* 其 他 栏 */ 
float:right: 谨 向 右 浮动 */ 
clear:right: 让 清除 右 侧 浮动 ， 避 人 免 同行 显示 */ 
width:200px 上 # 固 定 宽度 */ 
div#footer {/* 页 眉 区 域 */ 
clear:both: 族 清除 两 侧 浮动 ， 强 迫 外 框 撑 起 */ 
width:100% 启 宽 度 */ 
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图 8.28 设计 固 宽 + 自 适应 两 栏 页 面 
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7Mis 时 二 Wet 开发 及 入门 到 将 胡 ( 稚 课 靖 六 县 ) 


| 8. 4.2 设计 三 栏 页 面 


本 节 示 例 的 基本 思路 : 首先 定义 主 栏 外 包含 框 宽度 为 100% ， 


即 占据 整个 窗口 。 然 后 再 通过 左右 外 边 距 


来 定义 两 侧 空 白 区 域 ， 预 留 给 侧 栏 占用 。 在 设计 外 边 距 时 ， 一 侧 采用 百分比 单位 ， 另 一 侧 采 用 像素 为 单位 ， 


这 样 就 可 以 设计 出 两 列 宽 度 是 弹性 的 ， 另 一 


列 是 固定 的 。 最 后 再 通过 负 外 边 距 来 定位 侧 栏 的 显示 位 置 ， 设 


| 计 效 果 如 图 8.29 所 示 。 
| div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 
| float:left: 片 向 左 浮动 */ 
| width:100% 族 百 分 比 宽度 */ 
| 
} 
| div#content { 片 主 栏 内 包含 框 基本 样式 */ 
| margin: 0 33% 0 200px 让 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
| } 
divinavigation { 上 导航 栏 包含 框 基本 样式 */ 
| float:left: 语 向 左 浮动 */ 
| width:200px: 让 固定 宽度 */ 
| margin-left:-100% 上 * 左 外 边 距 取 负 值 进行 精确 定位 */ 
| } 
| div#extra { 让 其 他 栏 包 含 框 基本 样式 */ 
| float:left: 启 向 左 浮动 */ 
| width:33%:; 启 百 分 比 宽度 */ 
| margin-left:-33% 启 左 外 边 距 取 负 值 进行 精确 定位 */ 
| 
| 


页 眉 区 域 


二 体内 容 区 二 


图 8.29 


| 位 置 ， 使 其 显示 在 窗口 内 ， 最 后 定义 导航 栏 


| 目 自然 浮动 在 主 栏 右 侧 即 可 ， 核 心 代码 如 下 。 


也 可 以 让 主 栏 取 负 外 边 距 进行 定位 ， 其 他 栏 自然 浮动 。 例 如 ， 修 改 其 中 的 核心 代码 ， 
| 向 左 取 负 值 偏 移 25% 的 宽度 ， 也 就 是 隐藏 主 栏 外 框 左 侧 25% 的 宽度 ， 然 后 通过 内 框 来 调整 包含 内 容 的 显示 


© Er EE 
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设计 两 列 弹性 一 列 固 定 版 式 的 布局 效果 


让 主 栏 外 包含 框 


列 左 外 边 距 取 负 值 ， 覆 盖 在 


栏 的 右 侧 外 边 距 区 域 上 ， 其 他 栏 


Ss 
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div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 
margin-left:-25% 片 左 外 边 距 取 负 值 进行 精确 定位 */ 
上 
div#content {/* 主 栏 内 包含 框 基本 样式 */ 
margin: 0 200px 0 25% 让 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
} 
divinavigation {/* 导航 栏 包含 框 基本 样式 */ 
margin-left:-200px 让 左 外 边 距 取 负 值 进行 精确 定位 */ 


} 
div#extra {/* 其 他 栏 包含 框 基本 样式 */ 

width:25% 店 百 分 比 宽度 */ 
} 


设计 效果 如 图 8.30 所 示 ， 其 中 中 间 导 航 栏 的 宽度 是 固定 ， 主 栏 和 其 他 栏 为 弹性 宽度 显示 。 


图 8.30 设计 两 列 弹性 一 列 固定 版 式 的 布局 效果 


8.4.3 设计 九宫 格 版 式 
本 节 示 例 模拟 携程 旅行 网 首页 ， 设 计 一 个 九宫 格 页 面 布局 版 式 ， 效 果 如 图 8.31 所 示 。 
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图 8.31 设计 九宫 格 页 面 布局 版 式 
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| 携程 旅行 网 首页 的 主体 结构 包括 4 个 组 成 部 分 ， 分 别 为 顶部 、 中 部 、 底 部 和 侧 边栏 ， 顶 部 内 容 为 广 
| 告 图 片 ， 中 部 内 容 为 多 个 图 片 超 链接 ， 底 部 包括 多 个 导航 链接 ， 侧 边栏 为 长 形 按钮 。 其 中 顶部 结构 使 用 
， | header 元 素 实现 ， 中 部 结构 使 用 nav 元 素 实现 ， 底 部 结构 使 用 footer 元 素 实现 ， 侧 边栏 使 用 aside 元 素 实现 。 
| 基本 结构 代码 如 下 。 
<header> </header> 
| <na 


IV> 
<ul class="nav-list"></ul> 
</nav> 
<footer class="tool-box"> </footer> 
<aside class="c_pop_Wrap jspop"> </aside> 


| 本 页 包含 两 个 外 部 样式 表 文 件 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，common.css 
| 为 通用 样式 表 ， 重 置 常 用 元 素 默认 样式 ， 在 前 面 章 节 中 , 我 们 已 经 介绍 过 ， 这 里 就 不 再 重复 说 明 。 下 面 重 
| 点 介绍 九宫 格 版 式 设计 。 

| 第 1 步 ,首先 了 解 九 宫 格 版 式 的 HTML 结构。 该 结构 包 庄 在 <nav> 容器 中 ,内 部 包 于 一 个 无 序列 表 ， 
| 列表 里 包含 9 个 列表 项 目 ， 每 个 列表 项 目 又 包含 一 个 二 级 标题 。 


| <nav> 
| <ul class="nav-list"> 
| <li class="nav-flight" onclick=""> 
| <h2><a title=" 机 票 " hre 伍 "#" data-href=""> 机 票 </a></h2> 
| </i> 
| <li class="nav-train" onclick=""> 
| <h2><a title=" 火车 票 " hre 伍 "#" data-hre 伍 ""> 火车 票 </a></h2> 
</> 
<li class="nav-car" onclick=""> 
<h2><a title=" 用 车 " href="#" data-hre 伍 "> 用 车 </a></h2> 
</> 
<li class="nav-hotel" onclick="">……… <> 
<li class="nav-fortun" onclick="">"……** </> 
<li class="nav-strategy" onclick="">*…*… </li> 
<li class="nav-trip" onclick="">… 
<li class="nav-ticket" onclick="">*………* 
<li class="nav-week" onclick="">…… </li> 
</ul> 
</nav> 


第 2 步 ， 在 通用 样式 表 common.css 文件 中 清除 列表 缩 进 ， 清 除 列表 结构 的 项 目 符号 。 
html,body.nav ol.li.h2 { 
padding: Opx: 
margin: Opx: 
} 
li {list-style-type: none:} 


第 3 步 ， 在 main.css 样式 表 文 件 中 ， 找 到 以 nav-list 为 前 缀 的 一 组 样式 ,然后 我 们 来 仔细 分 析 下 这 组 样式 。 
和 4 步 ， 调 整 列 表 框 内 补 白 ， 留 出 一 点 边沿 空隙 。 


| .nav-list { padding: 10px 10px 5px 10px: } 
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第 5 步 ， 通 过 伪 类 对 象 :after， 在 列表 框 底部 添加 一 个 隐形 块 ， 目 的 是 与 下 面 一 行 栏目 错开 显示 ， 避 免 


相互 重 蚕 。 | 
.nav-list:after { content: “\0020'; display: block: clear: both: height: 0: overflow: hidden: } | 
第 6 步 ， 设 计 每 个 列表 项 目 向 左 浮动 ， 每 行 并 列 显示 3 个 。 定 义 相对 定位 ,这样 可 以 在 每 个 项 目 内 精 > 

确定 位 标题 。 Note 


| 
.nav-list li { position: relative: float: left; margin-bottom: Spx; -webkit-box-sizing: border-box; -moz-box-sizing: border- | 
box: -ms-box-sizing: border-box; box-sizing: border-box: } | 
| 
| 
| 


第 7 步 ， 通 过 伪 类 对 象 :before， 在 每 个 列表 项 目前 面 添 加 一 个 图 标 。 


.nav-list li:before { content: ""; position: absolute; -webkit-transform: translate(-50%, 0): -moz-transform: translate(-50%, | 
0): -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); background-image: url(../images/home.png); | 
background-size: 170px 160px:; background-repeat: no-repeat: } | 


第 8 步 ， 以 绝对 定位 方式 把 项 目的 标题 定位 到 项 目 块 的 左上 角 位 置 。 | 
.nav-list h2 { position: absolute; left: 8px; top: 8px: font: 500 14px/1 "Microsoft Yahei"; color: #fEE } | 
| 


第 9 步 ， 为 每 个 列表 项 目 定义 尺寸 ,第 一 列 宽度 为 40%， 第 二 、 三 列 宽度 为 30%6。 中 间 一 行 高 度 为 93 | 
像素 ,第 一 行 和 第 三 行 高 度 为 70 像素 。 | 


.hav-flight, .nav-train, .nav-car, .nav-trip, .nav-ticket, .nav-week { height: 70px: } 
.nav-hotel, .nav-fortun, .nav-strategy { height: 93px: } 

lav-train, .nav-car, .nav-fortun, .nav-strategy, .nav-ticket, .nav-week { border-left: Spx solid #fff: } | 
nav-flight, .nav-hotel, .nav-trip { width: 40%; } | 
.DavV-train, .DaV-car, .nav-fortun, .nav-strategy. .nav-ticket, .nav-week { width: 30%; } 
第 10 步 ， 为 每 个 列表 项 目 定义 不 同 的 背景 色 。 

.nav-flight { background-color: #368ff4: } 

.nav-train { background-color: #00ae9d: } 

.nav-car { background-color: #9556f3: } | 
.nav-hotel { background-color: #0fc4d9: } | 
.nav-fortun { background-color: #e7f8 人 f: } | 
.nav-strategy { background-color: #ff864a: } 
.nav-trip { background-color: #84d018: } 


.nav-ticket { background-color: #f3b613: } 
.DaV-Week { background-color: #78cddl: } 


第 11 步 ， 调 整 “财富 中 心 ” 列 表 项 目 中 的 标题 文本 的 颜色 和 显示 位 置 。 


.nav-list .nav-fortun h2. .nav-list .nav-fortun h2 a { color: #ff9913: } 
nav-list .nav-fortun h2 { top: 66px: left: 0: width: 100%: text-align: center: } 


yi 


第 12 步 , 使 用 CSS Sprites 技术 为 每 个 列表 项 目 定义 所 要 显示 的 图 标 类 型 和 大 小 。 
.nav-flight:before { top: 24px: left: 60%: width: 60px: height: 35px: background-position: 0 0: } 
-nav-train:before { top: 36px; left: 50%; width: 50px; height: 20px: background-position: -70px 0: } 
nav-car:before { top: 30px: left: 50%: width: 35px: height: 31px: backeround-position: -130px 0: } 
.nav-hotel:before { top: 30px: left: 60%: width: 58px: height: 44px: background-position: 0 -40px: } 


S20 


Note | 


素 实 现 ， 中 部 结构 使 用 section 元 素 和 article 元 素 实 现 ， 底 部 结构 使 用 footer 
元 素 实现 。 基 本 结构 代码 如 下 。 图 8.32 设计 用 户 管理 界面 


[7pss 各色 Wet 开发 从 入 站 到 兰 适 ( 微 裸 精 编 版 ) 


.nav-fortun:before { top: 24px: left: 50%; width: 24px: height: 35px; background-position: -60px -30px: } 
.nav-strategy:before { top: 34px: left: 50%; width: 34px: height: 34px: background-position: -120px -80px: } 
Dav-trip:before { top: 25px; left: 60%; width: 40px: height: 34px:; background-position: 0 -90px: } 
.nav-ticket:before { top: 32px: left: 50%; width: 50px: height: 26px; background-position: -65px -70px: } 
-naV-Week:before { top: 32px: left: 50%:; width: 49px: height: 26px: background-position: -50px -100px: } 


8. 4.4 设计 用 户 管理 界面 


器 Socm a YW 


回 © 


性 


本 节 示 例 模 拟 苏宁 易 购 网 的 用 户 后 台 管 理 界面 。 页 面 主体 为 上 、 


下 结构 ， 顶 部 内 容 包 括 3 个 导航 超 链接 和 1 个 Logo 图 片 ; ne 雪人 
| 个 由 图 片 和 文字 组 成 的 导航 超 链接 ; 底部 内 容 也 由 3 个 部 分 组 成 ， 从 上 至 下 
| 依次 为 当前 用 户 和 “ 回 顶 部 ” 锚 点 链接 按钮 、 登 录 和 注册 超 链接 、 版 权 信息 ， rh lr sb 
| 效果 如 图 8.32 所 示 。 se 


本 示例 页 面 结构 简单 ， 比 较 适 合 初学 者 练 手 ， 页 面 顶部 结构 使 用 nav 元 


copyrighto 2015-2018 msuningcom 


<!-- 公用 顶部 导航 -> 
<nav class="nav W pr"> </nav> 
<section class="w f14"> 
<article class="easy-box-con"> </article> 
</section> 
<footer class="footer Ww"> 
<div class="layout fix user-info"> </div> 
<ul class="list-ui-a foot-list te"></ul> 
<div class="tc copyright"> </div> 
</footer> 


顶部 标题 栏 包含 3 个 功能 图 标 按钮 和 标题 。 功 能 按钮 使 用 背景 图 蔡 换 设计 ， 标 题 使 用 Logo 图 片 直接 插 
样式 代码 如 下 


.nav .cate-all, .nav .my-account, .nav .my-cart { position: absolute: top: 12px: } 

-nav .cate-all { left: 15px; width: 18px: height: 19px: background: url(../images/title_bar.png) no-repeat 0 0; background- 
size: contain: } 

-nav .logo { display: block: width: 93px: margin: 12px auto 0: } 

-nav .my-account { right: 60px: width: 20px: height: 23px: background: url(../images/user.png) no-repeat 0 0: background- 
size: contain: } 

.naV .my-cart { right: 1Spx: width: 24px: height: 20px: background: url(../images/shop_cart_off.png) no-repeat 0 0: 
background-size: contain: } 


主体 区 域 包含 6 个 导航 按钮 ， 直 接 在 一 个 列表 项 目 中 包含 6 个 span 元 素 和 6 个 img 元 素 。 


<section class="w f14"> 
<article class="easy-box-con"> 
<ul class="easy-parent"> 
<liclass="fix"> 
<a href—""> <img src="images/all-order.png" alt="" /><span> 全 部 订单 </span></a> 
<a href=""> <img src="images/easy-pay.png" alt="" /><span> 易 付 宝 </span></a> 
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<a hre 全 "> <img src="images/favoritor.png" alt="" /><span> 商品 收藏 </span></a> 
<a hre 全 "> <img src="images/my-score.png" alt="" /><span> 我 的 积分 </span></a> 
<a href=""> <img src="images/my-coupon.png" alt="" /><span> 我 的 优惠 券 </span></a> | 
<a href=""> <img src="images/check-digest.png" alt="" /><span> 查看 物流 </span></a> </li> | 


</ul> | 

</article> | 
</section> 

在 main.css 样式 表 文 件 中 ， 找 到 下 面 一 段 样式 代码 ， 可 以 看 到 固定 整个 栏目 宽度 ， 然 后 让 每 个 链接 a | 


浮动 显示 ， 同 时 定义 相关 显示 样式 。 
.easy-parent { width: 273px: margin: 0 auto: } 
.easy-parent li a { display: block: float: left: width: 91px: margin-bottom: 20px: text-align: center; } 
.easy-parent li a span { display: block: } 
.easy-parent li a img { display: block: width: 43px: height: 43px:; margin: 0 auto: } 


页 脚 区 域 是 一 些 纯 文 本 样式 ， 本 节 就 不 再 重复 说 明 ， 读 者 可 以 参考 本 节 示 例 源 代码 。 | 


8.4.5 设计 侧 滑 面 板 


本 节 示 例 模拟 穷游 网 的 首页 ， 设 计 一 个 侧 滑 导航 任务 栏 ， 以 
及 主页 图 文 列表 信息 ， 页 面 效 果 如 图 8.33 所 示 

页 面 主体 为 左 、 右 结构 ， 左 侧 为 首页 的 导航 栏 ， 右 侧 为 首 
页 的 主体 内 容 。 左 侧 结 构 使 用 aside 元 素 和 section 元 素 肉 套 实 
现 ， 右 侧 结构 使 用 section 元 素 实 现 。 网 页 右 侧 的 主体 内 容 又 分 
为 上 、 中 、 下 3 个 组 成 部 分 ， 网 页 右 侧 上 部 使 用 header 元 素 实 
现 ， 右 侧 中 部 使 用 section 元 素 实现 ， 右 侧 底部 使 用 footer 元 
现 。 网 页 左 侧 的 导航 栏 也 分 为 上 上、 中、 下 3 个 组 成 部 分 ， 分 别 使 
用 section 、nav 和 section 元 素 实 现 


基本 结构 代码 如 下 


Te 


图 8.33 设计 侧 滑 界面 


| 

| 

<section class="qui-page"> | 

<header class="qui-header"> </header> | 

<section class="container"> </section> | 

<footer class="qui-footerBasic"> </footer> | 

</section> | 

<aside class="qui-asides"> | 

<section class="qui-aside"> | 

<section class="qui-asideHead"> </section> 

<nav class="qui-asideNav"> </nav> | 

<section class="qui-asideTool"> </section> | 

</section> 
</aside> 


使 用 <aside class="qui-asides"> 定义 侧 滑 界面 容器 ， 里 面包 庄 一 层 <section class="qui-aside"> 子 容器 。 | 
在 容器 内 ， 使 用 <section class="qui-asideHead"> 定义 标题 栏 ， 包 含 “登录 ”和 “注册 ”两 个 链接 文本 。 下 | 
面 使 用 <nav class="qui-asideNav"> 和 <section class="qui-asideTool"> 定义 6 个 导航 菜单 项 目 : 首页 、 目 的 地 、| 


as 
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| 酒店、 机 票 、 写 点 评 、 提 问题 。 


在 main.css 样式 表 文件 中 找到 以 .qui- 为 前 组 的 样式 代码 ， 下 面 详细 说 明 侧 滑 栏 样式 设计 。 
第 1 步 ， 定 义 侧 边 容器 绝对 定位 ， 并 偏 移 到 视图 左 侧 的 外 边 ， 默 认 不 显示 出 来 。 


.qui-asides { position: absolute: left: -200px: top: 0: width: 200px } 
第 2 步 ， 增 加 侧 滑动 画 。 设 计 当 向 右 滑动 时 ,动态 滑 出 面板 。 


.qui-aside { -webkit-transition: -webkit-transform 0.4s: transition: transform 0.4s: -webkit-overflow-scrolling: touch: 
Overflow-scrolling: touch: position: fixed: top: 0: width: 200px: bottom: 0; overflow-y: scroll; background-color: #2d3741 } 


区 3 步 ， 设 计 侧 滑 面板 标题 样式 ， 让 其 在 右 侧 显示 。 
.qui-asideHead { padding: 13px 10px 10px: } 

.qui-asideHead .signBtn { text-align: right: line-height: 18px: color: #ffF } 
.qui-asideHead .signBtn a { color: #fff } 


va 


第 4 步 ， 定义 菜单 项 目 ， 以 深 色 背 景 显示 。 

.qui-asideNav li { border-top: 1px solid #232d34; background-color: #36424b } 

第 5 步 ， 设 计 隔行 换 色 效果 。 

.qui-asideNav li:nth-child(even) { background-color: #364049 } 

第 6 步 , 设计 链接 a 以 块 显示 ,定义 每 行 显示 一 个 菜单 项 。 

.qui-asideNav a { display: block: padding-left: 15px: font-size: 16px: line-height: 44px:; color: #ced1d5 } 
第 7 步 ， 为 每 个 菜单 项 目前 面 添加 一 个 图 标 

.qui-asideNav .qui-icon { font-size: 18px; margin-right: 19px; color: #b6becb } 

第 8 步 ， 引入 自 定义 字体 。 


@font-face { font-family: 'Tcons': src: url('../images/qyer-icons.eot’): sre: Url ("../images/qyer-icons.eot?#iefix’) format 
(‘embedded-opentype'), Url ('../images/qyer-icons.woff) format (‘woff). url ('../images/qyer-icons.ttf) format (‘truetype’), 
Url ('../images/qyer-icons.svg#qyer-icons') format (svg) } 


第 9 步 , 分 别 使 用 自 定义 字体 定义 图 标 样式 。 


.qui-icon. home:before { content: "\f920" } 
.qui-icon. poiStrong:before { content: "\f901" } 
.qui-icon. hotel:before { content "\f908" } 
.qui-icon. flight:before { content: "\f909" } 
.qui-icon. reply_line:before { content "\f931" } 
.qui-icon. question:before { content: "\f92d" } 


第 10 步 ,设计 底部 两 个 菜单 项 目的 样式 。 


.qui-asideTool { border-top: 9px solid #232d34: background-color #2d3741 } 

.qui-asideTool li { border-top: 1px solid #232d34 } 

.qui-asideTool a { display: block: padding-left: 15px: font-size: 16px: line-height: 44px: color: #ced1d5 } 
.qui-asideTool .qui-icon { font-size: 18px: margin-right: 19px } 
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| 
| 
| 
.qui-asideTool . reply_line { color: #9fceda } | 
| 
| 
| 
| 
| 


8.4.6 设计 网 格 化 版 式 


本 节 示 例 模拟 同 程 旅游 网 的 首页 ， 以 网 格 化 的 版 式 设计 页 面 布局 ， 效 果 如 图 834 所 示 。 到 而 的 主 休 为 荐 2 
上 上、 中 、 下 结构 ， 顶 部 内 容 包 括 返回 链接 按钮 、 标 题 文字 和 主页 链接 按钮 ， 中 部 内 容 为 多 个 热点 链接 按 乌 ， 
底部 内 容 包括 多 个 超 链接 和 版 权 信息 。 


图 8.34 设计 网 格 化 版 式 页 面 


顶部 结构 使 用 header 元 素 实现 ， 中 部 结构 使 用 article 元 素 实现 ， 底 部 结构 使 用 footer 元 素 实现 。 基 本 | 
结构 代码 如 下 。 


<header class="header" id="headerId"> </header> 
<article class="content"> 

<nav class="fn-clear"> </nav> 

<section class="fn-clear"> </section> 
</article> 
<footer> </footer> 


第 一 个 栏目 使 用 <nav class="fn-clear"> 定义 。 其 中 包含 8 个 链接 ， 在 链接 文本 前 面 ， 嵌 入 一 个 em 元 素 ，| 
用 来 设计 图 标 ， 代 码 如 下 。 


<nav class="fh-clear"> 
<a href="#"><em class="hotel"></em> 酒店 预订 </a> 
<a hre 人 f="#"><em class="flight"></em> 机 票 预订 </a> 
<a href="#"><em class="scenery"></em> 景点 门票 </a> 
<a hre 伍 "#"><em class="selftrip"></em> 周末 游 </a> 
<a hre 人 f="#"><em class="dujia"></em> 出 境 游 </a> 
<a href="#"><em class="cruise"></em> 邮轮 </a> 
<a hre 仁 "#"><em class="train"></em> 火车 票 预订 </a> 


| 
| 
| 
| 
| 
| 
| 
下 面 重点 介绍 <article class="content"> 容器 的 版 式 设 计 ， 该 容器 包含 以 下 两 个 子 栏目 。 
| 
| 
| 
中 
| 
| 
| 
| 
| 
| 
| 
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<a href="#"><em class="login"></em> 登录 / 注册 </a> </nav> 


第 二 个 子 栏目 使 用 <section class="fn-clear"> 定义 ,包含 一 个 列表 框 ， 定义 了 4 个 列表 项 目 ， 代 码 如 下 ， 


链接 包含 一 个 标题 和 具体 文本 。 
<section class="fn-clear"> 
<ul> 
<li><a href="#" class="hot"> 
<hl> 热 销 榜 </h1> 
<em></em> 哪里 最 好 玩 </a></li> 
<li><a href="#" class="lower"> 
<hl> 最 低 价 <hl> 


<em></em> 只 有 这 一 次 </a></li> 
<li><a hre 人 ="#" class="groupbuy"> 

<hl> 团购 <hl> 

<em></em> 优惠 超 乎 想象 </a></li> 
<li><a href="#" class="locat"> 

<hl> 周边 景点 </h1> 

<em></em> 近 在 身边 </a></li> 

</ul> 
</section> 


在 main.css 样式 表 中 找到 如 下 样式 代码 ， 用 来 设计 网 格 化 版 式 。 

第 1 步 ， 为 网 格 化 版 块 定义 顶部 边框 ， 分 隔 区 块 。 

nav { border-top: 1px solid #e4elda; } 

第 2 步 ， 让 链接 文本 以 弹性 宽度 的 区 块 浮动 显示 ， 定 义 每 行 显示 4 个 ， 分 两 行 显示 ， 并 添加 边框 线 ， 
网 格 化 样式 . 


nav a { float: left: height: 85px; padding-top: 12px: width: 2596: font-size: 13px: line-height: 30px: text-align: center; 
-Webikit-box-sizing: border-box: -moz-box-sizing: border-box: -0-box-sizing: border-box; box-sizing: border-box: border- 
Tight: 1px solid #e4elda: border-bottom: 1px solid #e4elda: color: #64625f background: #fff: } 


第 3 步 ， 取 消 第 4 列 链接 块 右边 框 ， 避 免 切 分 视图 边缘 。 
Dav anth-child(4n) { border-right: none: } 


第 4 步 ， 以 背景 图 的 形式 , 采用 CSS Sprites 技术 为 每 个 链接 项 目 添 加 图 标 ， 并 固定 其 大 小 。 


Dav a em. section a em { background: url(../images/navIcon.png) no-repeat 0 0: background-size: 310px 150px: } 
nav a em { width: 38px; height: 38px: margin: 0 auto; border-radius: 4px: display: block: } 


第 5 步 ， 分 别 为 每 个 a 元 素 包含 的 em 元 素 定义 背景 色 和 定位 显示 不 同 的 背景 图 标 。 


nav a em.hotel { background-color: #ff7661: background-position: -6px -7px: } 

nav a em.flight { background-color: #66ccff: backeround-position: -56px -7px: } 
nav a em.scenery { background-color: #90cc00: backeround-position: -105px -7px: } 
nav a em.selftrip { background-color: #ff9f63: background-position: -155px -7px: } 
nav a em.dujia { background-color: #77b7ff: background-position: -6px -$7px: } 
nav a em.cruise { background-color: #ffbdsf backeround-position: -56px -57px: } 
nav a em.train { background-color: #56d8c4: background-position: -106px -57px: } 
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nav a em.login { background-color: #ffd33b: background-position: -156px -57px: } 


第 二 个 子 栏目 的 网 格 化 版 式 设计 方法 与 上 面 基本 相同 ， 读 者 可 以 参考 main css 样式 表 文 件 中 以 section | 
为 前 级 的 样式 代码 。 


8.4.7 ”设计 音乐 列表 版 式 


本 节 示 例 模拟 酷 狗 音乐 网 的 页 面 ， 效 果 如 图 8.35 所 示 。 页 面 从 上 至 下 由 4 个 部 分 组 成 ， 依 次 为 Logo 
图 片 和 下 载 链接 按钮 、 返 回 链接 按钮 和 标题 文字 、 用 于 导航 的 主体 内 容 、 用 于 播放 音乐 的 按钮 和 进度 条 。 


Or i 下 载 手机 配 狗 号 
各 栈 狗 音乐 
”新歌 TOP 100 » 
国 saroso » | 
r= | 
全 于 流行 音乐 爹 述 » | 
| | 
田 ] seers » | 
| | 
| 
| 
| 
| 
| 
| 


图 8.35 设计 分 类 列表 页 面 
页 面 基 本 结构 代码 如 下 。 


| 
| 

| 

| 

<header> </header> | 
<section class="header"> </section> | 
<!-- 主体 内 容 --> | 
<section id="content"> </section> | 
<section class="playwrap"> | 
<div class="playercon" id="playercon"> </div> | 
</section> | 
| 

下 面 重点 介绍 <section id="content"> 容器 的 版 式 设计 ， 该 容器 包含 一 个 列表 结构 ， 共 定义 了 4 个 列表 | 
项 目 。 每 个 列表 项 目 包含 3 块 内 容 : 导航 图 标 、 导 航 箭头 和 提示 文本 。 具 体 代 码 如 下 。 | 


<!-- 主体 内 容 -> 
<section id="content"> 
<ul id="rankUl"> 
<lirankname="XingGeTop100"> 
<div class="more gobal bg">&gt&gt</div> 
<div class="pic"> <img src="images/newtop100.png" _src="../images/newtop100.png" width="38" | 
height="38" alt="" /> </div> | 
<div class="text"> 新 歌 TOP 100</div> 
</> 


“231s 


到 了 cea 和 ape 开放 从 入 到 村 通 ( 蕉 训 精确 县) 


<lirankname="HotPlay500">*………</li> 
<lirankname="QuanQiuLiuXingYinYueJinBang">…… </li> 
<lirankname="BianJiTuiJianBang">…… </li> 
</ul> 
</section> 


在 main.css 样式 表 文 件 中 ， 找 到 下 面 的 样式 代码 。 

第 1 步 ， 定 义 容器 内 补 白 ， 留 出 一 点 空隙 。 

#content { padding: 87px 0 70px 0 } 

第 2 步 ， 定义 列表 项 目 内 补 白 、 字 体 大 小 和 行 高 ， 加 上 底 边 框 线 ， 隐 藏 超出 区 域内 容 。 

#content li { padding: 0 0 0 10px: font-size: 18px: height: SSpX: overflow: hidden: border-bottom: 1px solid #b4b4b4 } 

第 3 步 ， 让 每 个 列表 项 目 包含 的 3 块 内 容 向 左 浮动 ， 实 现 并 列 显 示 。 

#content .pic, #content .text, #content .more { float: left; } 

第 4 步 ， 通 过 背景 图 像 设 计 箭头 图 标 样式 。 

#content .more { background: url(../images/icon.png) no-repeat 0 -265pX: background-size: 100%; float: right; width: 
30px; margin-right: 12px: height: 30pX: text-indent: -9999px; margin-top: 15px:; font-family: Verdana; font-weight: bold; 
font-size: 14px } 

第 5 步 ， 设计 每 个 列表 项 目 中 包含 的 图 标 图 像 的 大 小 ， 并 调整 显示 位 置 。 

#content .pic { padding: 1px: width: 38px: height: 38px: margin: 6px 15px 0 0; } 

第 6 步 , 设计 每 个 列表 项 目的 高 度 为 35 像素 ， 行 高 为 35 像素， 以 实现 居中 显示 。 

#content .text { line-height: 35px; height: 35px: margin: 10px 0; } 
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移动 Web 设计 的 最 大 将 征 就 是 :响应 式 网 页 设计 ， 它 包含 
弹性 布局 和 弹性 图 片 。 本 章 将 详细 介绍 媒体 查询 的 基本 概念、 


Ce ee 


下 早 


使 用 媒体 查询 


( 铝 0 视频 讲解 : 21 分 钟 ) 


3 个 基本 要 素 :媒体 查询 、 
语法 ， 及 其 具体 应 用 。 


【学 习 重 点 】 


ed 
ed 
dl 
Lad 


过 担 媒 体 查 询 的 基本 语法 。 

了 解 如 何在 link 元 素 、@import 语句 和 CSS 文件 中 使 用 媒体 查询 。 

能 够 使 用 媒体 查询 根据 屏 莫 空间 大 小 调整 视觉 效果 。 

理解 meta 视 口 元 素 如 何 针 对 10S 和 安 曹 (Android) 设备 启用 媒体 查询 。 
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9.1 认识 媒体 查询 


CSS3 规范 分 成 很 多 模块 ， 媒 体 查 询 只 是 其 中 一 个 模块 。 利 用 媒体 查询 ， 可 以 根据 设备 的 能 
| 力 应 用 特定 的 CSS 样式 。 例如， 可 以 根据 视 口 宽度 、 屏 幕 宽 高 比 和 朝向 ( 水平 还 是 垂直 ) 等 ， 
| 只 用 几 行 CSS 代码 就 可 以 改变 内 容 的 显示 方式 。 媒 体 查询 得 到 了 广泛 实现 。 除 了 IE8 及 以 下 版 
| 本 外 ， 几 乎 所 有 浏览 器 都 支持 它 。 
| 2017 年 9 月 , W3C 发 布 了 媒体 查询 (Media Query Level 4, http: //www.w3.org/TR/ 
| mediaqueries-4/ ) 候选 推荐 标准 规范 ， 它 扩展 了 已 经 发 布 的 媒体 查询 的 功能 。 该 规范 用 于 CSS 
| 的 @media 规则 ， 可 以 为 文档 设 定 特定 条 件 的 样式 ， 也 可 用 于 HTML、JavaScript 等 语言 中 。4 
| 级 媒体 查询 尚未 得 到 广泛 支持 ， 而 且 规范 本 身 还 有 可 能 变动 。 不 过 ， 了 解 未 来 几 年 可 能 有 什么 
| 新 特性 可 以 使 用 还 是 有 必要 的 。 
| CSS3 媒体 查询 模块 规范 的 官网 网 址 为 http: /www.w3.org/TR/css3-mediaqueries/。 访 问 规范 ， 可 以 看 到 
| 官方 对 媒体 查询 下 的 定义 : 
| 媒体 查询 包含 媒体 类 型 和 零 个 或 多 个 检测 媒体 特性 的 表达 式 。width 、height 和 color 都 是 可 用 于 媒体 查 


| 询 的 特性 。 使 用 媒体 查询 ， 可 以 不 必修 改 内 容 本 身 ， 而 让 网 页 适 配 不 同 的 设备 。 

| 如 果 没 有 媒体 查询 ， 仅 使 用 CSS 是 无 法 修改 网 页 外 观 的。 这 个 模块 让 我 们 可 以 提前 编写 出 适应 很 多 不 
| 可 预测 因素 的 CSS 规则 ， 例 如 ， 屏 幕 方向 水 平 或 垂直、 视 口 或 大 或 小 等 。 

| 弹性 布局 虽然 可 以 让 设计 适应 较 多 场景 ， 也 包括 某 些 尺寸 的 屏幕 ， 但 有 时 候 确实 不 够 用 ， 因 为 我 们 还 
| 需要 对 布局 进行 更 细致 的 调整 。 媒 体 查询 让 这 一 切 成 为 可 能 ， 它 就 相当 于 CSS 中 基本 的 条 件 迎 辑 。 


9.2 使 用 媒体 查询 


媒体 查询 的 语法 是 什么 样 的 ， 媒 体 查询 怎么 起 作用 呢 ? 本 节 将 围绕 这 两 个 问题 展开 讲解 。 


9.2.1 媒体 类 型 和 媒体 查询 


1. 媒体 类 型 


支持 的 浏览 器 


用 于 语音 和 音乐 合成 器 
于 触觉 反馈 设备 


| Opera 
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handheld 于 小 型 或 手持 设备 

print 所 有 浏览 器 于 打印 机 

projection Opera 于 投影 图 像 ， 如 幻灯 片 

screen 所 有 浏览 器 于 屏幕 显示 器 

tty Opera 于 使 用 固定 间距 字符 格 的 设备 ， 如 电 传 打字 机 和 终端 
tv Opera 于 电视 类 设备 

embossed Opera 于 凸 点 字符 ( 盲文 ) 印刷 设备 

speech Opera 于 语音 类 型 

all 所 有 浏览 器 于 所 有 媒体 设备 类 型 


通过 HTML 元 素 属性 media 定义 样式 表 的 媒体 类 型 ， 具 体 方法 如 下 。 
回 定义 外 部 样式 表 文 件 的 媒体 类 型 

<link hre 人 ="csss.css" rel="stylesheet" type="text/css" media="handheld" /> 

以 上 外 部 样式 表 仅 能 够 在 手持 设备 中 应 用 

加 定义 内 部 样式 表 文 件 的 媒体 类 型 


<style type="text/css" media="screen"> 


</style> 


以 上 内 部 样式 表 仅 能 够 在 桌面 屏幕 设备 中 应 用 
2. 媒体 查询 


CSS3 在 媒体 类 型 基础 上 ， 提 出 了 Media Queries ( 媒体 查询 ) 的 概念 


能 更 强大 、 更 加 完善 。 


媒体 查询 可 以 根据 设备 特性 ， 如 屏幕 宽度 、 高 度 、 
式 表 。 例 如 ， 下 面 这 条 导 人 外 部 样式 表 的 语句 
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 


在 media 属性 中 设置 媒体 查询 的 条 件 (max-width: 600px ): 当 屏 幕 宽度 小 于 或 等 于 600px， 则 调用 
small.css 样式 表 来 泻 染 页 面 。 


次 提示 : 两 者 主要 区 别 : 媒体 查询 是 一 个 值 或 一 个 范围 的 值 ， 而 媒体 类 型 仅仅 是 设备 的 匹配 。 媒 体 类 型 | 
可 以 帮助 用 户 获取 以 下 数据 。 
浏览 器 窗口 的 宽 和 高 


办 办 办 罗 


设备 的 


设备 的 手持 方向 ， 横 向 还 是 竖 向 


分 状 率 


宽 和 高 
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。 媒 体 查 询 比 CSS2 的 媒体 类 型 功 | 


设备 方向 (横向 或 纵向 )， 为 设备 定义 独立 的 CSS 样 


| 二 注意 : CSS 媒体 查询 4 级 草案 中 废弃 了 一 些 特性 ， 特 别 是 device-height、device-width 和 国 蝴 议 乌 


a [7Ms5 昌 二 Wid 开发 以 入 门 到 的 胡 ( 斤 名 糊 久 版 ) 


9.2.2 使 用 @media 


一 个 媒体 查询 由 一 个 可 选 的 媒体 类 型 和 零 个 或 多 个 限制 范围 的 表达 式 组 成 ， 如 宽度 、 高 度 和 颜色 。 
1. 基本 语法 
CSS3 使 用 @media 规则 定义 媒体 查询 ， 简 化 语法 格式 如 下 。 
@media [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*{ 
谨 CSS 样式 列表 */ 
} 


参数 简单 说 明 如 下 。 
回 <media_ type>: 指定 媒体 类 型 ， 具 体 说 明 见 表 9.1 所 示 。 
回 <expression>: 指定 媒体 特性 。 放 在 一 对 圆 括 号 中 ， 如 ( min-width: 400px )。 
回 逮 辑 运算 符 ， 如 and ( 逻辑 与 )、not ( 逻辑 否 )、only ( 兼容 设备 ) 等 。 
. 媒体 特性 
te 媒体 查询 中 用 得 最 多 的 特性 是 视 口 宽 度 ( width )。 就 笔者 个 人 的 经 验 来 看 ， 很 少 需要 
用 到 其 他 设备 特性 ， 偶 尔 会 用 到 分 辨 率 和 视 口 高 度 。 
媒体 特性 包括 13 种 ， 接 受 单个 的 逻辑 表达 式 作为 值 ， 或 者 没有 值 。 除 scan 和 grid 外 ， 其 他 特性 都 可 
| 以 接受 min 或 max 的 前 级 ， 用 来 表示 大 于 等 于 ， 或 者 小 于 等 于 的 逻辑 ， 以 此 避免 使 用 大 于 号 (> ) 和 小 于 
号 (<) 字符 。 各 种 媒体 特性 的 简单 说 明 请 扫 码 了 解 。 
【示例 】 看 看 下 面 的 代码 。 


@import url ("tiny.css") Screen and (min-width: 200px) and (max-width: 360px); 


线 上 阅读 


这 里 使 用 最 大 宽度 ( max-width ) 和 最 小 宽度 ( min-width ) 设 定 了 范围 。 因 此 ，tiny.css 只 在 设备 视 口 介 
| 于 200 像素 和 360 像素 之 间 时 才 会 被 应 用 。 


device-aspect-ratio ( 参见 : http: //www.w3.org/TR/mediaqueries-4/#mf-deprecated )。 虽 
然 已 经 支持 它们 的 浏览 器 还 会 继续 支持 ， 但 不 建议 在 新 写 的 样式 表 中 再 使 用 它们 。 


3. 在 CSS 中 使 用 
在 CSS 样式 的 开头 必须 定义 @media 关键 字 ， 然 后 指定 媒体 类 型 ， 再 指定 媒体 特性 。 媒 体 特性 的 格式 
与 样式 的 格式 相似， 分 为 两 部 分 ， 由 冒号 分 隔 ， 冒 号 前 指定 媒体 特性 ， 冒 号 后 指定 该 特性 的 值 。 例 如 ， 下 
mit 的 语句 指定 了 当 设备 显示 屏幕 宽度 小 于 640 像素 时 所 使 用 的 样式 。 

@media screen and (max-width: 639px) { 

放样 式 代码 */ 

呈 

可 以 使 用 多 个 媒体 查询 将 同一 个 样式 应 用 于 不 同 的 媒体 类 型 和 媒体 特性 中 ， 媒 体 查询 之 间 通 过 逗号 
| 隔 ， 类 似 于 选择 器 分 组 。 
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@media handheld and (min-width: 360px). screen and (min-width: 480px) { 
让 样式 代码 */ 


| 
| 
| 
| 
| 
| 
) 
只 要 其 中 任何 一 个 媒体 查询 表达 式 为 真 ， 就 会 应 用 样式 ; 如 果 没有 一 个 为 真 ， 则 样式 表 没 | 


全 注意 : 任何 CSS 长 度 单位 部 可 以 用 来 指定 媒体 查询 的 条 件 。 像素 (px ) 是 景 常用 的 ， 而 em 或 fem 
也 可 以 用 。 例 如 ， 想 在 800 像素 处 设置 断 点 ， 但 又 想 用 em 单位， 可 以 用 800 除 以 16， 就 是 | 
50em。 | 


还 可 以 在 表达 式 中 加 上 not、only 和 and 等 逻辑 运算 符 。 


/下 面 的 样式 代码 将 被 使 用 在 除 便携 设备 之 外 的 其 他 设备 或 非 彩色 便携 设备 中 。 
@media not handheld and (color) { 
让 样式 代码 */ 


} 
1/ 下面 的 样式 代码 将 被 使 用 在 所 有 非 彩色 设备 中 
@media all and (not color) { 
让 样式 代码 */ 
} 


only 运算 符 能 够 让 那些 不 支持 媒体 查询 ， 但 是 支持 媒体 类 型 的 设备 ， 忽 略 表 达 式 中 的 样式 。 例 如 : 


@media only screen and (color) { 


让 样 式 代码 */ 


} 


对 于 支持 媒体 查询 的 设备 来 说 ， 能 够 正确 地 读 取 其 中 的 样式 ,仿佛 only 运算 符 不 存在 一 样 ; 对 于 不 支 

持 媒体 查询 ， 但 支持 媒体 类 型 的 设备 ( 如 IE8 ) 来 说 ， 可 以 识别 @media screen 关键 字 ， 但 是 由 于 先 读 取 的 | 
是 only 运算 符 ， 而 不 是 screen 关键 字 ， 将 忽略 这 个 样式 。 | 
4. 在 @import 和 link 元 素 中 使 用 | 

可 以 在 使 用 @import 导入 CSS 时 使 用 媒体 查询 ， 有 条 件 地 向 当前 样式 表 中 加 载 其 他 样式 表 。 例 如 , 以 | 

下 代码 会 导入 样式 表 phone.css， 但 条 件 是 必须 是 屏幕 设备 ， 而 且 视 口 不 超过 360 像素 。 | 
@import url("phone.css") screen and (max-width: 360px); | 

| 

注意 ,使 用 CSS 中 的 @import 会 增加 HITP 请 求 ， 进 而 影响 加 载 速度 ， 因 此 请 慎 用 。 | 
也 可 以 用 在 link 元 素 中 。 例 如 ， 下 面 的 代码 定义 了 如 果 页 面 通过 屏幕 呈现 ， 且 屏幕 宽度 不 超过 480 像 | 

素 ， 则 加 载 shetland.css 样式 表 。 | 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> 

在 下 面 的 代码 中 ， 首 先 ， 使 用 逗号 分 隔 每 个 媒体 查询 表达 式 。 其 次 ， 在 projection ( 投影 机 ) 之 后 没有 | 
任何 特性 / 值 对 。 这 样 省 略 特定 的 特性 ， 表 示 适 用 于 具备 任何 特性 的 该 媒体 类 型 。 在 这 里 ， 表 示 可 以 适用 于 | 
任何 投影 机 。 | 
| 


<link rel="stylesheet" media="screen and (orientation: portrait) and 
(min-width: 800px). projection" href—="800wide-portrait-screen.css" /> 
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9.2.3 应 用 @media 


【示例 1】and 运算 符 用 于 符号 两 边 规 则 均 满 足 条 件 的 匹配 。 


@media screen and (max-width: 600px) { 
虎 匹配 宽度 小 于 等 于 600 像素 的 屏幕 设备 */ 


【示例 2】not 运算 符 用 于 取 非 ， 所 有 不 满足 该 规则 的 均 匹 配 。 
@media not print { 
让 匹配 除了 打印 机 以 外 的 所 有 设备 */ 


@media not all and (max-width: 500px) {} 
/9 车 价 秆 7 

@media not (all and (max-width: 500px)) {} 
/而 不 是 +/ 

@media (not all) and (max-width: S00px) {} 


在 逗号 媒体 查询 列表 中 ，not 仅 会 否定 它 所 在 的 媒体 查询 ， 而 不 影响 其 他 的 媒体 查询 。 
如 果 在 复杂 的 条 件 中 使 用 not 运算 符 ， 要 显 式 添 加 小 括号 ， 避 免 歧 义 。 
【示例 3】，( 逗号 ) 相当 于 or 运算 符 ， 用 于 两 边 有 一 条 满足 则 匹配 ， 
@media screen, (min-width: 800px) { 
族 匹配 屏幕 或 者 宽度 大 于 等 于 800 像素 的 设备 */ 
) 


【示例 4] 在 媒体 类 型 中 ，all 是 默认 值 ， 匹 配 所 有 设备 


@media all { 
久 可 以 过 滤 不 支持 media 的 浏览 器 */ 
。 


常用 的 媒体 类 型 还 有 screen ( 匹配 屏幕 显示 器 ) 和 print ( 匹配 打印 输出 )， 更 多 媒体 类 型 可 以 参考 表 9.1。 
【示例 5】 使 用 媒体 查询 时 ， 必 须要 加 括号 ,一 个 括号 就 是 一 个 查询 。 


@media (max-width: 600px) { 
谨 匹配 界面 宽度 小 于 等 于 600 像素 的 设备 */ 


} 
@media (min-width: 400px) { 
店 匹配 界面 宽度 大 于 等 于 400 像素 的 设备 */ 
} 
@media (max-device-width: 800px) { 
让 匹配 设备 (不 是 界面 ) 宽度 小 于 等 于 800 像素 的 设备 */ 
} 
@media (min-device-width: 600px) { 
雍 匹 配 设备 (不 是 界面 ) 宽度 大 于 等 于 600 像素 的 设备 */ 
: 
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党 提示 : 在 设计 手机 网 页 时 ， 应 该 使 用 device-width/device-height， 因 为 手机 浏览 器 默认 会 对 页 面 进行 一 ， 
些 缩放 ， 如 果 按 照 设备 宽 高 来 进行 匹配 ， 会 更 接近 预期 的 效果 。 | 


【示例 6】 媒体 查询 允许 相互 嵌 套 这样 可 以 优化 代码 ， 避 免 元 余 。 
@media not print { ‘Note 
Ty Note 
ee (max-width: 600px) { | 
此 条 匹配 宽度 小 于 等 于 600 像素 的 非 打 印 机 设备 */ | 
) 
@media (min-width: 600px) { | 
让 此 条 匹配 宽度 大 于 等 于 600 像素 的 非 打 印 机 设备 */ | 
| 
| 


} 
} 


【示例 7】 在 设计 响应 式 页 面 时 ， 应 该 根据 实际 需要 ， 先 确定 自 适应 分 辩 率 的 闪 值 ， 也 就 是 页 面 响应 的 | 


| 
| 
@media (min-width: 768px){ 

让 >=768 像素 的 设备 */ | 
} | 
@media (min-width: 992px){ | 

让 >=992 像素 的 设备 */ | 
} | 
@media (min-width: 1200px){ | 

人 # >=1200 像素 的 设备 */ | 
} 


< 所 注意 : 下 面 样式 顺序 是 错误 的 ， 因 为 后 面 的 查询 范围 将 履 盖 掉 前 面 的 查询 范围 ， 生前 而 如 体委 鹿 | 
失效 。 
@media (min-width: 1200px){ } 
@media (min-width: 992px){ } 
@media (min-width: 768px){ } 


因此 ， 当 我 们 使 用 min-width 媒体 特性 时 ， 应 该 按 从 小 到 大 的 顺序 设计 各 个 阀 值 。 同 理 如 果 使 用 max- 
width 时 ， 就 应 该 按 从 大 到 小 的 顺序 没 计 各 个 阅 信 


@media (max-width: 1199){ 
/# <=1199 像素 的 设备 */ 

} 

@media (max-width: 991px){ 
<=-991 像素 的 设备 */ 

} 

@media (max-width: 767px){ 
/# <=-768 像素 的 设备 */ 


. 
【示例 8】 用 户 可 以 创建 多 个 样式 表 ， 以 适应 不 同 媒 体 类 型 的 宽度 范围 。 当 然 ， 更 有 妆 率 的 方法 多 | 
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| 个 媒体 查询 整合 在 一 个 样式 表 文 件 中 ， 这 样 可 以 减少 请 求 的 数量 。 


@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
记 样 式 列表 */ 

} 

@media only screen and (min-width: 321px) { 
入 样式 列表 六 


中 
@media only screen and (max-width: 320px) { 
启 样 式 列表 */ 


| 【示例 9】 如 果 从 资源 的 组 织 和 维护 的 角度 考虑 ， 可 以 选择 使 用 多 个 样式 表 的 方式 来 实现 媒体 查询 ， 这 
| 样 做 更 高 效 。 

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 

<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> 

<link rel="stylesheet" media="print" href="print.css" /> 


【示例 10】 使 用 orientation 属性 可 以 判断 设备 屏幕 当前 是 横 屏 ( 值 为 landscape ) 还 是 竖 屏 ( 值 为 portrait )。 


| 
| 
| 
| 
| 


| 

| 

| 

| 

| 

| @media screen and (orientation: landscape) { 
| .iPadLandscape { 
| 

| 

| 

| 

| 


width: 3096: 
float: right: 
] 


} 

@media screen and (orientation: portrait) { 
.iPadPortrait {clear: both: } 

1 


| 不 过 orientation 属性 只 在 iPad 上 有 效 ， 对 于 其 他 可 转 屏 的 设备 ( 如 iPhone )， 可 以 使 用 min-device- 
| width 和 max-device-width 来 变通 实现 。 

| 【示例 11】 针 对 高 分 辨 率 设备 的 媒体 查询 。 媒 体 查 询 的 一 个 常见 的 使 用 场景 就 是 针对 高 分 辨 率 设 备 编 
| 写 特殊 样式 。 

| @media (min-resolution: 2dppx) { 

店 样 式 */ 


| 上 面 媒体 查询 只 针对 每 像素 单位 为 2 点 ( 2dppx ) 的 屏幕 。 类 似 的 设备 有 iPhone 4+ 的 视网膜 屏 ， 以 及 
| 其 他 很 多 高 清 屏 的 安 卓 机 。 减 小 dppx 值 ， 可 以 扩大 这 个 媒体 查询 的 适用 范围 。 

| 为 支持 更 广泛 的 设备 ， 在 使 用 min-resolution 属性 时 ,需要 加 上 适当 的 浏览 器 前 级 ， 可 以 使 用 工具 自动 
| 完成 。 

【扩展 】 

媒体 查询 仅 是 一 种 纯 CSS 方式 实现 响应 式 Web 设计 的 方法 ， 用户 还 可 以 使 用 JavaScript 库 来 实现 同样 
的 设计 。 例 如 ， 下 载 css3-mediaqueries.js ( http: //code.google.com/p/css3-mediaqueries-js/ )， 然 后 在 页 面 中 调 
。 对 于 老式 浏览 器 (如 正 6、IE7 和 IE8 ) 可 以 考虑 使 用 css3-mediaqueries.js 进行 兼容 。 


| 
| 
| 
| 
| 
| 
| 
| 
| } 
| 
| 
| 
| 
| 
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<!-[ifltIE 9]> 
<script src="http: //css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]l-> 


【示例 12】 下 面 的 代码 演示 了 如 何 使 用 jQuery 来 检测 浏览 器 宽度 ， 并 为 不 同 的 视 口 调用 不 同 的 样式 表 。 | 


<script type="text/javascript" src="http: //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
S$(document).ready(functionO{ 
S$(window).bind("resize", resizeWindow): 
function resizeWindow(e){ 
Var newWindowWidth = $(window).width(); 
if(newWindowWidth < 600){ 
$("link[rel=stylesheet]").attr( {href: "mobile.css"}): 
} 
else if(newWindowWidth > 600){ 
$("link[rel=stylesheet]").attr( {href: "style.css"}): 
} 
)); 
</script> 


9.2.4 案例 : 设计 第 一 个 响应 式 版 式 


下 面 我 们 通过 一 个 简单 的 链接 列表 演示 响应 式 设计 的 一 般 方法 。 


首先 ,我们 应 该 知道 ， 在 样式 表 中 ,位 于 下 方 的 CSS 样式 会 获 盖 位 于 上 方 的 目标 相同 的 CSS 样式 ， 除 | 


非 上 方 的 选择 符 优先 级 更 高 或 者 更 具体 


因此 ， 可 以 在 一 开始 设置 一 套 基准 样式 ， 将 其 应 用 给 不 同 版 本 的 设计 方案 。 这 套 样式 表 确保 用 户 的 基 
准 体验 。 然 后 再 通过 媒体 查询 获 盖 样式 表 中 相关 的 部 分 。 例 如 ， 如 果 是 在 一 个 很 小 的 视 口 中 ， 可 以 只 显示 | 


字体 。 
第 1 步 , 设计 一 个 简单 的 超 链接 列表 。 
<a href="#" class="CardLink CardLink Hearts"> 红 桃 </a> 
<a href="#" class="CardLink CardLink Clubs"> 梅花 </a> 
<a href="#" class="CardLink CardLink_Spades"> 黑 桃 </a> 
<a href="#" class="CardLink CardLink_Diamonds"> 方块 </a> 


第 2 步 ,设计 和 链接 的 基准 样式 ， 让 它们 抉 状 堆 倒 显示， 同时 根据 喜好 定义 文本 样式 。 


.CardLink { 
display: block: 刻 块 状 堆 释 显 示 */ 
color: #666: 片 灰色 字体 */ 
text-shadow: 0 2px 0 #efefef: 片 添加 淡淡 的 文字 投影 */ 
text-decoration: none: 让 隐藏 下 面 线 */ 
height: 2.75rem: 语 固定 高 度 */ 
line-height: 2.75rem: 片 文 本 垂直 居中 */ 


border-bottom: 1px solid #bbb: 访 绘 制 下 边线 */ 
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position: relative: 证 相 对 定位 ， 以 便 定位 额外 内 容 */ 
} 
第 3 步 ,设计 链接 拓展 样式 ,为 每 个 链接 左 侧 添 加 动态 内 容 。 
.CardLink: before { 鼎 统 一 样式 */ 
display: none: 广 默 认 隐藏 显示 */ 
position: absolute: 店 绝 对 定位 */ 
top: 50%: left: 0: 店 指 定 偏 移 位 置 */ 
transform: translateY(-50%):; 让 向 左 偏 移 */ 
; 
让 为 每 个 链接 添加 动态 内 容 */ 


.CardLink Hearts: before { content: "¥"; } 
.CardLink Clubs: before { content: "®"; } 
.CardLink Spades: before { content: "e"; } 
.CardLink Diamonds: before { content: "4": } 


第 4 步 , 设计 一 个 响应 阀 值 : min-width: 300px， 即 大 于 等 于 300 像素 时 ,启动 响应 重 绘 。 


让 当 视图 宽度 大 于 等 于 300 像素 时 ， 显 示 大 号 字体 ， 并 调整 左 侧 空 阶 */ 
@media (min-width: 300px) { 
.CardLink { 
padding-left: 1.8rem: 
font-size: 1.6rem:; 


} 


J 
店 当 视图 宽度 大 于 等 于 300 像素 时 ， 显 示 左 侧 动态 添加 的 内 容 */ 
@media (min-width: 300px) { 

.CardLink: before { display: block: } 


} 
第 5 步 ,保存 文档 之 后 ， 在 浏览 器 中 所 看 到 的 效果 如 图 9.1 所 示 。 


ae)| © - Seocaho.. ac 用 


(a) 小 于 300 像素 (b ) 大 于 等 于 300 像素 
图 9.1 第 一 个 响应 式 版 式 
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9.3 案例 实战 


本 节 将 通过 几 个 实例 练习 CSS3 媒体 查询 的 网 页 应 用 。 


9.3.1 判断 显示 屏幕 宽度 


本 节 示 例 演示 了 如 何 正确 使 用 @media 规则 ， 判 断 当 前 视 口 宽度 位 于 什么 范围 ， 代 码 如 下 。 | 
| 
| 


<style type="text/css"> 
.wrapper {/* 定义 测试 条 的 样式 */ 
padding: Spx 10px: margin: 40px: 
text-align: center; color: #999; 
border: solid 1px #999; 
} 
.Viewing-area span {/* 默认 情况 下 隐藏 提示 文本 信息 */ 
Color: #666; 
display: none; 


} 
族 应 用 于 移动 设备 ， 且 设备 最 大 宽度 为 480 像素 */ 
@media screen and (max-device-width: 480px) { 

.a { background: #ccc: } 


} 
上 显示 屏幕 宽度 小 于 等 于 600 像素 */ 
@media screen and (max-width: 600px) { 
bf 
background: red; color: #fff: 
border: solid 1px #000: 


} 
span.lt600 { display: inline-block: } 


| 
| 

| 

| 

| 

| 

} | 
让 显示 屏幕 宽度 介 于 600~900 像素 */ | 
@media screen and (min-width: 600px) and (max-width: 900px) { | 
<{ | 
background: red: color: #fff: | 

border: solid 1px #000: | 

| 

| 

| 

| 

| 

| 

| 

| 

| 


} 
span.bt600-900 { display: inline-block: } 


} 
此 显示 屏幕 宽度 大 于 等 于 900 像素 */ 
@media screen and (min-width: 900px) { 
-d{ 
background: red: color: #fff: 
border: solid 1px #000: 
} 
span.gt900 { display: inline-block: } 
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</style> 

<div class="wrapper a"> 设备 最 大 宽度 为 480 像素 。</div> 

<div class="wrapper b"> 显示 屏幕 宽度 小 于 等 于 600 像素 </div> 

<div class="wrapper c"> 显示 屏幕 宽度 介 于 600 像素 到 900 像素 之 间 </div> 
<div class="wrapper d"> 显示 屏幕 宽度 大 于 等 于 900 像素 </div> 

| <p class="viewing-area"> 

| <strong> 当前 显示 屏幕 宽度 : </strong> 

| <span class="lt600"> 小 于 等 于 600px</span> 

| <span class="bt600-900"> 介 于 600px-900px 之 间 </span> 

| <span class="gt900"> 大 于 等 于 900px</span> 
| 

| 

| 


</p> 


| 本 节 示 例 设 计 当 显示 屏幕 宽度 小 于 等 于 600 像素 时 ， 则 高 亮 显 示 <div class="wrapper b"> 测试 条 ， 并 
| 在 底部 显示 提示 信息 : 小 于 等 于 600px; 当 显示 屏幕 宽度 介 于 600 像素 和 900 像素 之 间 时 ， 则 高 亮 显 示 <div 
| class="wrapper ce"> 测试 条 ， 并 在 底部 显示 提示 信息 : 介 于 600px-900px; 显示 屏幕 宽度 大 于 等 于 900 像素 时 ， 
| 则 高 亮 显示 <div class="wrapper d"> 测试 条 ， 并 在 底部 显示 提示 信息 : 大 于 等 于 900px; 当 设 备 宽度 小 于 等 于 
| 480 像素 时 ， 则 高 亮 显示 <div class="wrapper a"> 测试 条 。 演 示 效 果 如 图 9.2 所 示 。 


ET 


| 
| 
| 
| 
| 
| ELE 
| 

| [| 

| [RE [ ER 


前 直 明 归 度 ， 小 要 于 ops 省 前 有 未央 并 ， 于 oprco00e2 间 


(a ) 显示 屏幕 宽度 小 于 等 于 600px (b ) 显示 屏幕 宽度 介 于 600px-900px 


EE 


EE EE 


EE EL 


当前 县 未明 可 并 ， 上 二 于 orr 


(c) 显示 屏幕 宽度 大 于 等 于 900px 
图 9.2 使 用 @media 规 则 


9.3.2 ”设计 响应 式 版 式 


本 节 示 例 在 页 面 中 设计 了 如 下 3 个 栏目 。 
| 回 <div id="main">: 主要 内 容 栏目 。 
”加 <divid-"sub">: 次 要 内 容 栏目 。 


.244 。 


第 9 章 使 用 媒体 查询 


页 面 结构 代码 如 下 。 


<div id="container"> 
<div id="wrapper"> 
<div id="main"> | 
<hl> 水 调 歌 头 。 明月 几时 有 </h1> Note 
<h2> 苏轼 </h2> 


| 
| 
| 
| 
回 ”<divid="sidebar">: 侧 边栏 栏目 。 | 
| 
| 
| 


</div> 
<div id="sub"> 
<h2> 宋词 精 选 </h2> 


<div id="sidebar"> 
<h2> 词 人 列表 </h2> 


设计 页 面 能 够 自 适应 屏幕 宽度 ， 呈 现 不 同 的 版 式 布局 。 当 显示 屏幕 宽度 在 999 像素 以 上 时 ， 让 三 个 栏 | 
目 并 列 显示 ; 当 显示 屏幕 宽度 在 639 像素 以 上 、1000 像素 以 下 时 ， 设 计 两 栏目 显示 ; 当 显 示 屏 幕 宽度 在 640 | 
像素 以 下 时 ， 让 3 个 栏目 堆 释 显示。 | 


| 
| 
<style type="text/css"> | 
店 默 认 样式 */ | 
谨 网 页 宽度 固定 ， 并 居中 显示 */ | 
#container { width: 960px: margin: auto: } | 
店主 体 宽度 */ | 
#wrapper {width: 740px: float: left: } | 
让 设计 3 栏 并 列 显示 */ | 
#main {width: 520px: float: right: } | 
#sub { width: 200px: float: left: } | 
#sidebar { width: 200px: float: right: } | 
族 窗 口 宽度 在 999 像素 以 上 */ | 
@media screen and (min-width: 1000px) { | 

诺 3 栏 显示 *#/ | 

#container { width: 1000px: } | 

#wrapper { width: 780px: float: left: } | 

#main {width: 560px: float: right: } | 

#sub { width: 200px: float: left: } | 

#sidebar { width: 200px: float: right: } | 


} | 
让 窗口 宽度 在 639 像素 以 上 、1000 像素 以 下 */ | 
@media screen and (min-width: 640px) and (max-width: 999px) { | 
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#container { width: 640px: } 

#wrapper { width: 640px; float: none: } 
-height { line-height: 300px: } 

#main { width: 420px: float: right: } 
#sub {width: 200px: float: left: } 
#sidebar {width: 100%: float: none: } 


| 
| 
| 
| 
| 户 两 栏 星 示 */ 
| 
| 
| 
| 
| 


证 窗口 宽度 在 640 像素 以 下 */ 

@media screen and (max-width: 639px) { 
证 堆 苹 显示 */ 
#container { width: 100%: } 
#wrapper { width: 100%: float: none: } 
#main {width: 100%; float: none: } 
#sub { width: 100%: float: none: } 
#sidebar { width: 100%; float: none; } 

} 

</style> 


当 显示 屏幕 宽度 在 999 像素 以 上 时 ，3 栏 并 列 显示 ， 预 览 效 果 如 图 9.3 所 示 。 


图 9.3 显示 屏幕 宽度 在 999 像素 以 上 时 的 页 面 显 示 效 果 


| 当 显 示 屏幕 宽度 在 639 像素 以 上 、1000 像素 以 下 时 ， 两 栏 显 示 ， 预 览 效果 如 图 9.4 所 示 ; 当 显 示 屏 幕 宽 
| 度 在 640 像素 以 下 时 ，3 个 栏目 从 上 往 下 堆 释 显示 ， 预 览 效 果 如 图 9.5 所 示 。 


水 调 歌 头 明月 几时 有 
苏轼 


| 
| 

| 

| 

| 

| 两 原 中 秋 。 欢 忆 达 是 ， 大 蕉 ， 作 此 往 ， 基 全 了 由 。 

| 商 ， 今 是 条 年 。 和 放 科 风 妥 去， 双关 于 村 
| 玉宇 ， 吉 站 不 肝 守 。 起 革 二 ， 条 要 在 人 间 

| 美酒， 代 尘 户 ， 卫 到、 不 区 有 惧 ， 何 扣 长 别 时 国 ? 人 有 非 次 再 尘 ， 月 有 阳 哺 
醒 加 此 地 古 于 全 名 原 和 长久， 千里 北 岂 - 

| 

| 

| 

| 

| 

| 

| 


朱 词 精 选 


转交 ， 代 绊 产 ， 辽 天 天 .不 应 厅 依 ， 
有 太 克 光合 ， 月 有 及 晴 可 议 ， 此 让 二 夫 全 
EE 


| ”图 9.4 宽度 在 639 像素 以 上 、1000 像素 以 下 时 的 效果 图 9.5 宽度 在 640 像素 以 下 时 的 效果 
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9.3.3 设计 响应 式 菜单 


本 节 示 例 设计 一 个 响应 式 菜单 ， 能 够 根据 设备 显示 不 同 的 伸缩 盒 布局 效果 。 在 小 


屏 ( 小 了 


F 601 像 | 


素 ) 设备 上 ， 从 上 到 下 显示 ; 在 默认 ( 大 于 799 像素 ) 状态 下 ， 从 左 到 右 显示 ， 右 对 齐 盒子 ; 当 设备 介 于 | 


600~800 像素 时 ， 设 计 导 航 项 目 分 散 对 齐 显示 ， 预 览 效果 如 图 9.6 所 示 。 


a ) 小 于 601 像素 屏幕 


Demalhosyrysicfictht x NW) 
4 3 & Dlocalhost/mysite/testhtml 


(c) 大 于 799 像素 屏幕 
图 9.6 定义 伸缩 项 目 居中 显示 


本 示例 主要 代码 如 下 。 


<style type="text/css"> 

让 默认 伸缩 布局 */ 

.navigation { 
list-style: none: 
margin: 0; 
background: deepskyblue: 
店 启 动 伸缩 盒 布 局 */ 
display: -webkit-box: 
display: -moz-box: 
display: -ms-flexbox: 
display: -webkit-flex: 
display: flex: 
-webkit-flex-flow: row wrap: 
让 所 有 列 面向 主轴 终点 位 置 靠 齐 */ 


justify-content: flex-end: 
} 
让 设计 导航 条 内 超 链 接 默认 样式 */ 


navigation a { text-decoration: none: display: block: padding: lem: color white: } 
让 设计 导航 条 内 超 链接 在 鼠标 经 过 时 的 样式 */ 
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.navigation a: hover { backeround: blue: } 

放 在 介 于 600~800 像素 设备 下 伸缩 布局 */ 

@media all and (max-width: 800px) { 
刻 当 在 中 等 屏幕 中 ， 导 航 项 目 居 中 显示 ， 并 且 剩 余 空 间 平均 分 布 在 列表 之 间 */ 
.navigation { justify-content: space-around: } 


} 
必 在 小 于 601 像素 设备 下 伸缩 布局 */ 
@media all and (max-width: 600px) { 
-navigation { /* 在 小 屏幕 下 ， 没 有 足够 空间 行 排列 ， 可 以 换 成 列 排列 */ 
-webkit-flex-flow: column wrap: 
flex-flow: column wrap: 
padding: 0: } 
.navigation a { 
text-align: center: 


padding: 10px: 
border-top: 1px solid rgba(255, 255, 255, 0.3): 
border-bottom: 1px solid rgba(0. 0, 0. 0.1); } 
.navigation li: last-of-type a { border-bottom: none: } 
4 
</style> 


<ul class="navigation"> 
<li><a hre 伍 "#"> 首页 </a></li> 
<li><a hre 伍 "#'> 咨询 </a></li> 
<li><a hre 伍 "#"> 产品 </a></li> 
<li><a hre 伍 "#"> 关于 </a></li> 
</ul> 


934 设计 自动 隐藏 布局 


本 节 示例 设计 一 个 响应 式 页 面 布局 效果 ， 并 能 根据 显示 屏幕 宽度 变化 自动 隐藏 或 调整 版 式 显示 。 
| 第 1 步 ,， 新 建 HTML5 文档 ， 在 头 部 head 元 素 内 定义 视 口 信息 。 使 用 meta 元 素 设置 视 口 缩放 比例 为 1， 
让 浏览 器 使 用 设备 的 宽度 作为 视图 的 宽度 ， 并 禁止 初始 缩放 。 


<!DOCTYPE html> 


| 
| 
| 
| <html> 
| <head> 
| <meta charset="utf-8"> 
| <meta name="viewport" content="width=device-width. initial-scale=1.0"> 
| </head> 
| 
| 第 2 步 , IE8 或 者 更 早 的 浏览 器 并 不 支持 媒体 查询 。 可 以 使 用 media-queriesjs 或 者 respondjs 插件 进行 兼容 。 
| 
| <!--[fltIE 9]> 
| <script src="http: //css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
| <![endif]--> 
| 
第 3 步 , 设计 页 面 HTML 结构 。 整 个 页 面 基 本 布局 包括 头 部 、 内 容 、 侧 边栏 和 页 脚 。 内 容 容 器 宽度 是 


600 像素 ， 而 侧 边栏 宽度 是 300 像素 ， 如 图 9.7 所 示 。 
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<div id="pagewrap"> 
<div id="header"> 
<hl> 唐诗 赏析 </h1> 
</div> 
<div id="content"> 
<hl> 水 调 歌 头 明月 几时 有 </h1> 
<h2> 苏轼 </h2> 


<div id="sidebar"> 
<h2> 宋词 精 选 </h2> 
<u> 


</div> 
<div id="footer"> 
<h2> 词 人 列表 </h2> 


Qa) Bt 
唐诗 赏析 


水 调 歌 头 ' 明 月 几时 有 
苏轼 


丙 夺 中 秋 ， 欢 饮 这 日， 大 醉 ， 作 此 笠 ， 菲 件 子 由 - 
明月 几时 有 ? 把 酒 问 青 天 。 不 知 天 上 宫阙 ， 今 少 是 何 年 。 我 坎 乘 风 归 去 ， 又 仙 琼 枕 王 


宇 ， 高 处 不 胜 宗 ， 起 焉 开 笠 影 ， 何 似 在 人 间 ? 


转 朱 图， 长 给 户 ， 轨 无 眼 。 们 惠 长 向 别 时 国 ? 人 有 站 区 离合 ， 月 有 阴 节 王 
缺 ， 此 事 十 次 全 。 介 加 人 长久 共 姥山 


词 人 列表 


及 
二 得 
.天 让 
* ik 


图 9.7 设计 页 面 结构 


第 4 步 ， 使 用 CSS3 媒体 查询 设计 当 视图 宽度 为 小 于 等 于 980 像素 时 ， 如 下 规则 将 会 生效 。 基 本 上 , 会 | 


将 所 有 的 容器 宽度 从 像素 值 设置 为 百分比 以 使 得 容器 大 小 自 适应 。 
此 当 窗 口 视图 小 于 等 于 980 像素 时 响应 下 面 的 样式 *#/ 
@media screen and (max-width: 980px) { 
#pagewrap { width: 9496: } 
#content { width: 65%: } 
#sidebar { width: 30%: } 
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| 第 5 步 ， 为 小 于 等 于 700 像素 的 视图 指定 <div id="content"> 和 <div id="sidebar"> 的 宽度 为 自 适应 ,并 
且 清 除 浮动 ， 使 得 这 些 容器 按 全 宽度 显示 。 


| 
| 
| A* 当 窗 口 视图 小 于 等 于 700 像素 时 响应 下 面 的 样式 */ 
| 


@media screen and (max-width: 700px) { 


#content { 
| width: auto: 
| float: none; 
| } 
| #sidebar { 
| width: auto: 
| float: none: 
| } 
| 
| 


| 第 6 步 ， 对 于 小 于 等 于 480 像素 ( 手机 屏幕 ) 的 情况 ,将 hl 和 了 2 的 字体 大 小 修改 为 16 像素 ， 并 隐藏 
| 侧 边栏 <div id="sidebar">。 
让 当 窗 口 视图 小 于 等 于 480 像素 时 响应 下 面 的 样式 */ 
@media screen and (max-width: 480px) { 
hl, h2 { font-size: 16px: } 
#sidebar { display: none: } 
} 


| 第 7 步 ， 可 以 根据 需要 添加 更 多 媒体 查询 ， 目 的 在 于 为 指定 的 视图 宽度 指定 不 同 的 CSS 规则 ， 来 实现 
| 不 同 的 布局 ， 示 例 演示 效果 如 图 9.8 所 示 。 


© [CIT ET 
唐诗 赏析 
水 调 歌 头 :明月 几时 有 
苏轼 


两 搬 中 秋 ， 欢 饮 达 旦 ， 大 醉 ， 作 此 篇 ， 芒 全 子 由 。 


生生 守 和 和 攻守 辣 全 是 人 年， 作 和 下 QH3 去 ，X2RH 开 3 
,WJ 在 人 店 认 代打 


es es 局 元 蛋 。 有 人 恨 ， 何 事 长 向 JB 图 ? 人 有 翡 其 离 台 ， 月 有 阴 捕 图 
铅 ， 此 事 古 淮 全 ， 人 得 原 人 长 允 ， 寺 里 共 旭 如 水 油 歌 头 -明月 几时 有 


3 
宋词 精 选 丙 未 中秋， 获 饮 达 昌 ， 大 醇 ， 作 此 入 ， 基 证 子 由， 


酒 问 青天 ， 不 知 天 上 言 阅 ， 今 夕 是 何 
去 ， EE ee 高 处 不 福 寒 。 起 舞 
何 似 在 人 间 


转 朱 阅 ， 峰 终 户 ， 有 ; 不 应 有 恨 ， 何 李 长 向 别 时 
和 eh 此 事 古 难 全 。 但 原 


(a ) 平板 屏幕 下 的 效果 (b ) 手机 屏幕 下 的 效果 
| 图 9.8 设计 不 同 宽度 下 的 视图 效果 
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5 设计 自 适 应 手机 页 面 


本 节 示 例 设计 页 面 宽度 为 980 像素 ， 对 于 桌面 屏幕 来 说 ， 该 宽度 适用 于 任何 宽 于 1024 像素 的 分 辩 率 。 | 
通过 媒体 查询 监测 宽度 小 于 980 像素 的 设备 ， 并 将 页 面 宽度 由 固定 方式 改 为 液态 版 式 ， 布 局 元 素 的 宽度 随 | 
着 浏览 器 窗口 的 尺寸 变化 进行 调整 。 当 可 视 部 分 的 宽度 进一步 减 小 到 650 像素 以 下 时 ， 主 要 内 容 部 分 的 容 
器 宽度 会 增 大 至 全 屏 ， 而 侧 边栏 将 被 置 于 主 内容 部 分 的 下 方 ， 整 个 页 面 变 为 单列 布局 ， 演 示 效 果 如 图 9.9 
所 示 。 


水 调 歌 头 "明月 几时 有 


水 调 歌 头 "明月 儿 时 有 
oa 


CU 


图 9.9 在 不 同 宽度 下 的 视图 效果 


第 1 步 ， 新 建 HIML5 文档 ， 构 建文 档 结 构 ， 包 括 页 头 、 主 要 内 容 部 分 、 侧 边栏 和 页 脚 


<div id="pagewrap"> 
<header id="header"> 
<hgroup> 


<hl id="site-logo"> 网 站 LOGO</h1> 
<h2 id="site-description"> 网 站 描述 信息 </h2> 


</hgroup> 
<nav> 


<ul id="main-nav"> 
<li><a href="#"> 导航 链接 ， 可 以 扩展 </a></li> 


<ul> 
</nav> 


<form id="searchform"> 
<input type="search"> 


</form> 
</header> 
<div id="content"> 


<article class="post"> 主体 内 容 区 域 </article> 


</div> 
<aside id="sidebar"> 


<section class="widget"> 侧 栏 栏目 </section> 


</aside> 
<footer id="footer"> 页 脚 
</div> 


区 域 </footer> 


“2515 


Note 


5 ee 


让 
| 
| 第 2 步 ，IE9 之 前 的 浏览 器 不 支持 HIML5 元 素 ， 可 使 用 htmlsjs 来 帮助 这 些 旧版 本 的 正 浏览 器 创建 
| 


HTML5 元 素 节点 。 
<!-[if ltIE 9]> 
<script src="http: //html$shim.googlecode.com/svn/trunk/html$.js"></script> 
<![endif]--> 


第 3 步 ， 设计 HTML5 块 级 元 素 样式 ， 将 这 些 新 元 素 声明 为 块 级 样式 。 
article, aside, details, figcaption, figure, footer header hgroup. menu, nav, section {display: block: } 


第 4 步 , 设计 主要 结构 的 CSS 样式。 这 里 将 注意 力 集中 在 整体 布局 上 。 整 体 设计 在 默认 情况 下 页 面容 
| | 器 的 固定 宽度 为 980 像素 ， 页 头 部 分 (header ) 的 固定 高 度 为 160 像素 ， 主 要 内 容 部 分 ( content ) 的 宽度 为 
| 600 像素 ， 左 浮动 。 侧 边栏 ( sidebar ) 右 浮动 宽度 为 280 像素 。 
<style type="text/css"> 
#pagewrap { 

width: 980px: 

margin: 0 auto; 


} 
#header { height: 160px: } 
#content { 

width: 600px: 

float: left: 


1 

#sidebar { 
width: 280px; 
float: right: 


| 轿 

| #footer { clear: both: } 

| </style> 

| 

| 第 5 步 ， 调 用 css3-mediaqueries.js 文件 ， 解决 IE8 及 其 以 前 版 本 支持 CSS3 媒体 查询 的 问题 。 
| <!--[ifltIE 9]> 

| <sciipt src="http: //css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
| <![endif]--> 

| 

”第 6 步 ,创建 CSS 样式 表 ， 并 在 页 面 中 调用 。 
| <link href="media-queries.css" rel="stylesheet" type="text/css"> 

”第 7 步 ， 借 助 媒体 查询 设计 自 适应 布局 。 

| 当 浏 览 器 可 视 部 分 宽度 大 于 650 像素 ， 小 于 981 像素 时 ， 将 pagewrap 的 宽度 设置 为 95%， 将 content 
| 的 宽度 设置 为 60%， 将 sidebar 的 宽度 设置 为 30%。 
| 
| 


@media screen and (max-width: 980px) { 
#pagewrap { width: 95%: } 


#content { 
| width: 60%: 
| padding: 3% 4%: 
| } 
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SS 
#sidebar { width: 30%:; } 
#sidebar .widget { 
padding: 8% 7%; 
margin-bottom: 10px: 
} | ~ 
1 Note 


第 8 步 ， 当 浏览 器 可 视 部 分 宽度 小 于 651 像素 时 ， 将 header 的 高 度 设置 为 auto; 将 searchform 绝对 定 | 
位 在 top: 5px 的 位 置 ; 将 main-nav、site-logo 、site-description 的 定位 设置 为 static; 将 content 的 宽度 设置 为 | 
auto ( 主要 内 容 部 分 的 宽度 将 扩展 至 满 屏 )， 并 取消 float 设置 ; 将 sidebar 的 宽度 设置 为 100%， 并 取消 float | 


设置 。 | 


| 
@media screen and (max-width: 650px) { | 
#header { height: auto: } | 

| 


#searchform { 
position: absolute; 
top: Spx; 

Tight: 0; 

. 


#main-nav { position: static: } 
#site-logo { 
margin: 15px 100px 5px 0: 
position: static: 


} | 
第 9 步 ， 当 浏览 器 可 视 部 分 宽度 小 于 481 像素 时 ，480 像素 也 就 是 传统 手机 横 屏 时 的 宽度 。 当 可 视 部 分 | 
的 宽度 小 于 481 像素 时 ， 禁 用 HTML 节点 的 字号 自动 调整 。 默 认 情况 下 ， 手 机 会 将 过 小 的 字号 放大 ， 这 里 | 
可 以 通过 -webkit-text-size-adjust 属性 进行 调整 ， 将 main-nav 中 的 字号 设置 为 90%。 | 


| 

@media screen and (max-width: 480px) { | 
html {-webkit-text-size-adjust: none: } | 
| 

| 

| 


} 
#site-description { 
margin: 0 0 15px; 
position: static; 
} | 
#content { | 
width: auto; margin: 20px 0; | 
float: none; | 
了 | 
#sidebar { | 
width: 100%:; margin: 0; | 
float: none: | 
} | 
| 
| 
| 
| 
| 


#main-nav a { 
font-size: 9096: 
padding: 10px 8px: 


S203s 
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第 10 步 , 设计 弹性 图 片 。 为 图 片 设置 max-width: 100% 和 height: auto， 设 计 图 像 弹性 显示 。 
img{ 
max-width: 100%: height: auto: 
width: auto\9: /* 兼容 IE8 */ 
让 


第 11 步 ， 设 计 弹性 视频 。 对 于 视频 也 需要 进行 max-width: 100% 的 设置 ,但 是 Safari 对 embed 的 该 属 
| 性 支持 不 是 很 好 ， 所 以 使 用 以 width: 100% 来 代替 。 


-Video embed, .video object .video iframe { 
width: 100%; min-height: 300px: 
height: auto: 

} 


第 12 步 ， 在 默认 情况 下 ,手机 端 Safari 浏览 器 会 对 页 面 进行 自动 缩放 ， 以 适应 屏幕 尺寸 。 这 里 可 以 使 
br 的 meta 设置 ， 将 设备 的 默认 宽度 作为 页 面 在 Safari 的 可 视 部 分 宽度 ， 并 禁止 初始 化 缩放 。 


<meta name="viewport" content="width=device-width: initial-scale=1.0"> 


pte | 


9.4 在 线 练习 


本 节 将 通过 大 量 的 上 机 练习 ， 学 习 使 用 CSS3 媒体 查询 设计 自 适应 网 页 版 式 ， 培 养 初学 者 网 页 设计 的 
能 力 


.254 。 


设计 弹性 布局 


( 鳃 0 视频 讲解 : 32 分 钟 ) 


20 世纪 90 年 代 末 ， 网 站 的 宽度 大 都 以 百分比 形式 定义 。 百 分 比 布 局 使 得 网 页 宽度 
能 够 随 着 查看 它们 的 屏幕 窗口 大 小 而 变化 ， 因 而 得 名 弹性 布局 。 在 大 约 2005 年 到 2010 
年 之 间 ， 出 现 了 一 股 固 定 宽 度 设 计 的 风潮 。 现 在 ， 由 于 响应 式 移动 设计 的 流行 ， 弹 性 布 
局 重新 被 重视 。 媒 体 查 询 虽 然 可 以 让 我 们 根据 视 口 大 小 分 别 切 换 不 同 的 样式 ， 但 在 这 些 
“新 点 ”之 间 必 须要 平滑 过 渡 才 行 ， 而 使 用 弹性 布局 就 可 以 轻松 解决 这 个 问题 。 

2015 年 ，CSS 推出 了 一 个 新 的 布局 模块 叫 “ 仲 缩 金 ”(Flexbox)， 已 经 有 很 多 浏览 
器 都 支持 ， 可 以 在 日 常 开发 中 使 用 了 。 除 了 用 于 实现 弹性 布局 ，Flexbox 还 可 以 用 来 居 
中 内 容 ， 改 变 源 码 顺序 ， 创 建 令 人 惊艳 的 页 面 布局 。 本 章 将 详细 介绍 各 种 弹性 布局 技术 
和 具体 应 用 。 


【学 习 重 点 】 

PI 设计 多 列 布局 。 

了 设计 旧版 伸缩 使 布局 。 
了 设计 新 版 伸缩 盒 布局 。 
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10.1 多 列 布局 


权威 参考 


属性 ， 用 来 设计 多 列 布局 ， 它 允许 网 页 内 容 跨栏 显示 ， 适 合 设计 正文 版 式 。 


10.1.1 设置 列 宽 


| 
| 
| 
| 
| column-width 属性 可 以 定义 单列 显示 的 宽度 ， 基 本 语法 如 下 。 
| 
| 
| 


column-width: <length> | auto 


| 取 值 简单 说 明 如 下 。 

| 回 <length>: 用 长 度 值 来 定义 列 宽 ， 不 允许 负 值 。 

| 回 auto: 根据 <column-count> 自 定 分 配 宽度 ， 为 默认 值 。 

【示例 】 下 面 的 示例 演示 了 column-width 属性 在 多 列 布局 中 的 应 用 。 设 计 body 元 素 的 列 宽度 为 300 像 
| 素 ， 如 果 网 页 内 容 能 够 在 单列 内 显示 ， 则 会 以 单列 显示 ; Ce 且 内 容 很 多 ， 则 会 在 多 列 中 进行 
| 显示， 演示 效果 如 图 10.1 所 示 、 根据 窗口 宽度 自动 调整 为 两 栏 显示 ， 列 宽度 显示 为 300 像素 。 


| 
| <style type="text/css"> 
| 店 定 义 网 页 列 宽 为 300 像素 ， 则 网 页 中 每 个 栏目 的 最 大 宽度 为 300 像素 */ 
| body {column-width: 300px: } 
| hl {color: #333333; padding: 5px 8px: font-size: 20px: text-align: center: padding: 12px: } 
h2 {font-size: 16px: text-align: center: } 
| P {color: #333333; font-size: 14px;: line-height: 180%; text-indent: 2em: } 
| </style> 
| <hl>W3C 标准 </h1l> 
| <p>W3C 的 各 类 技术 标准 在 努力 为 各 类 应 用 的 开发 打造 一 个 <strong> 开放 的 Web 平台 (Open Web Platform)</ 
| strong>。 尽 管 这 个 开放 Web 平台 的 边界 在 不 断 延 伸 ， 产 业界 认为 HTMLS5 将 是 这 个 平台 的 核心 ,平台 的 能 力 
| 将 依赖 于 W3C 及 其 合作 伙伴 正在 创建 的 一 系列 Web 技术 , 包括 CSS，SVG，WOFF, 语义 Web， 及 XML 和 
| 各 类 应 用 编程 接口 (APIs)。</p> 
| <p> 截至 2014 年 3 月 .W3C 共 设立 5 个 技术 领域 ， 开 展 23 个 标准 计划 。W3C 设 有 46 个 工作 组 (Working 
| Group)、14 个 兴趣 小 组 (Interest Group) 、3 个 协调 组 (Coordination Group) 、169 个 社区 组 (Community Group)， 
| 以 及 3 个 业务 组 (Business Group)。</p> 
| <p> 目前 , W3C 正在 探讨 技术 专家 及 个 人 参与 W3C 标准 制定 过 程 的 Webizen 计划 ， 敬 请 期 待 。</p> 
| <p>W3C 于 2014 年 11 月 发 布 了 题 为 &ldquo: W3C 工作 重点 (2014 年 11 月 )" 的 报告 ， 这 是 最 新 的 一 份 对 W3C 
| 近期 开展 的 工作 要 点 进行 了 综述 的 文章 ， 阐 述 了 近期 的 工作 重点 和 优先 级 。</p> 
| 
| 
| 
| 
| 
| 
| 
| 


图 10.1 固定 列表 宽度 显示 


256% 


第 10 章 ”设计 辞 性 市 局 


10.1.2 ”设置 列 数 


column-count 属性 可 以 定义 显示 的 列 数 ， 基 本 语法 如 下 。 


column-count: <integer> | auto 


取 值 简单 说 明 如 下 。 | 

回 ”<integer>: 用 整数 值 来 定义 列 数 。 不 允许 负 值 。 | 

回 auto: 根据 <'column-width'> 自 定 分 配 宽度 ， 为 默认 值 。 | 

【示例 】 在 上 面 的 示例 基础 上 ， 如 果 定 义 网 页 列 数 为 3， 则 不 管 浏览 器 窗口 怎么 调整 ， 页 面 内 容 总 是 遵 | 

循 3 列 布局 ,演示 效果 如 图 10.2 所 示 。 | 
刻 定 义 网 页 列 数 为 3, 这 样 整个 页 面 总 是 显示 为 3 列 */ 

| 


body { column-count: 3: } 


€ 9 ETTTTETTTTTT 0 FT * ” 
WOFF. 语义 Web， 及 XML 和 类 应 开交。 目前 ，W3C 正 在 探讨 导 术 专 容 及 个 
W3C 标 准 程 接口 (APE》 、 人 名 与 W3C 杯 发 利 全 过程 的 Webizen 计 
蓝 ， 蛤 请 央 特 ， 


W9C 的 各 大 技术 标准 在 田力 为 吉 交 吉村 2014 时 9 月 ，WC 失 讼 5 个 技 


应 用 的 开发 打造 一 个 开放 的 We 平台。 本 领域， 开展 23 个 环 交 计划。W3Ci W3C 于 2014 平 11 月 发 布 了 家 为 


on RaCI 天 点 (2014 年 1 月 ) "的 
让 wb 平台 的 边界 在 不 林 浊 信 ， 产 业界。 趣 4 组 epeep hebben 
ER 工作 要 上 行囊 了 放 
的 能 力 特 依 各 二 W3C 及 其 羡 作 傣 伴 正在 和 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
训 建 的 -到 Rh 技术 ， 自 括 CSS .SVG, | 
| 


图 10.2 设计 3 列 显示 


10.1.3 ”设置 间距 


| 
| 
column-gap 属性 可 以 定义 两 栏 之 间 的 间距 ， 基 本 语法 如 下 。 | 
column-gap: <length> | normal | 
| 
| 
| 
| 
| 


取 值 简单 说 明 如 下 。 

回 <length>: 用 长 度 值 来 定义 列 与 列 之 间 的 间隙 。 不 允许 负 值 。 

回 normal: 与 <font-size> 大 小 相同 。 假 设 该 对 象 的 font-size 为 16px， 则 normal 值 为 16px， 依 此 | 
类 推 。 | 
【示例 】 在 上 面 的 示例 基础 上 ， 通 过 column-gap 和 line-height 属性 配合 使 用 ， 把 文档 版 面 设计 得 疏 朗 大 

方 ， 以 方便 阅读 。 其 中 列 间距 为 3am， 行 高 为 2.Sem， 页 面 内 文字 内 容 看 起 来 更 明晰 ， 也 轻松 许多 ， 演 示 效 | 

果 如 图 10.3 所 示 。 | 

谨 定 义 页 面 内 容 显 示 为 3 列 */ | 
column-count: 3: | 


语 定 义 列 间 距 为 3em. 默认 为 lem*/ | 


“207s 
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column-gap: 3em: 
line-height: 2.5em: /* 定义 页 面 文 本 行 高 */ 


} 
| SG A 
Note dt 技 术 ， 包括 CSS SVG 以 有 3 个 业务 组 (Business 


W3C 标 准 WOFF, 语 XWeb,， 及 XML 和 各 Gromp) - 


类 应 用 编程 接口 (APE) 。 
I 目前 ,WwW3C 正 在 探讨 技术 专 


W3C 的 各 类 技术 标准 在 田力 喜 至 2014 年 3 月 ，W3C 共 设 军 及 个 人 参与 W3C 标 准 制定 过 程 
为 各 夹 应 用 的 开发 打造 一 个 开放 立 5 个 技术 领域 ， 开 展 23 个 标准 的 Webizeni+ 创 ， 注 请 期 待 。 


| 

| 

| 

| 

| 的 wes 二 全 (Open web 计划 。WGC 吉 有 46 个 工作 组 

| Platiorm) 。 尽管 这 个 开 训 Web (CWeding Growp】，14 个 并 起 小 ee 

| 于 的 TW 到 和， 产 上 和 。。 捍 (iaeeaGnp) 、3 介 六。 

| 认 因 HTMLS 人 是 这 个 平台 的 术 CCoordimation Group) 、169 个 a 
心平 各 的 能 力 将 依 驯 于 W3C 及 社区 组 《Commity Groop》， 站 i 

| 其 襄 作 怕人 正 在 创建 的 一 素 列 sp 

必要 志 和 优先 级 。 


| 
| 图 10.3 设计 玻 朗 的 跨栏 布局 
| 


| 10.1.4 ”设置 列 边框 


column-rule 属性 可 以 定义 每 列 之 间 边框 的 宽度 、 样 式 和 颜色 。 基 本 语法 如 下 。 
column-rule: <' column-rmule-width > || <' column-mle-style > || <' column-rule-color > 

取 值 简单 说 明 如 下 。 

< colunm-rule-width >: 设置 对 象 的 列 与 列 之 间 的 边框 厚度 。 


< column-rule-style >: 设置 对 象 的 列 与 列 之 间 的 边框 样式 。 
< column-rule-color >: 设置 对 象 的 列 与 列 之 间 的 边框 颜色 。 


column-rule-style 属性 的 语法 如 下 ， 取 值 与 边框 样式 border-style 相同 。 
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 


column-rule-width 与 border-width, column-rule-color 与 border-color 设置 相同 。 
| 【示例 】 在 上 面 的 示例 基础 上 ， 为 每 列 之 间 的 边框 定义 一 个 虚线 分 割 线 ， 线 宽 为 2 像素 ， 灰 色 显 示 ， 演 
| 示 效 果 如 图 10.4 所 示 。 
yt 
族 定 义 页 面 内 容 显 示 为 3 列 *#/ 
column-count: 3; 
上 证 定义 列 间距 为 3em. 默认 为 lem*/ 


| 
| 
| 
| 
| 
| column-gap: 3em: 
| 
| 
| 
| 
| 


line-height: 2.5em: 
谨 定 义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray: 
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i 以 及 3 个 业务 组 【Basincss 
W3C 标 准 i Ce yp 和 
Wi 目前 ，WaC 正 在 深 讨 技术 专 

W3C 的 各 类 技术 标准 在 努力 家 及 个 人 参与 W3C 慰 准 宙 过 各 
为 各 类 应 用 的 开发 打造 一 个 开放 上 ! 的 Webizen 计 划 ， 误 请 期 待 。 
的 Web 平 台 (Open Web . 
Pilatferm 》 。 尽 车 这 个 开 庆 Web 
平台 的 边界 在 不 断 廷 什 ， 产 业 寞 月 ) "的 报告 。 这 是 最 新 的 一 共 


edhe 对 W3C 近 湖 开 展 的 工作 要 点 进行 


WIC 于 2014 年 1 月 发 布 了 时 | 
| 
| 

心 ， 三 各 的 角力 交代 赖 于 W3C 及 。 | 计 区 组 (Commmnity Gromp] ， | 
| 
| 
| 
| 
| 


为-W3C 工 作 重点 ‘2014 年 11 


denied 了 综 遂 的 文章 , 阅 述 了 近期 的 工 
其 合作 快 们 正在 创建 的 一 系 | 


图 10.4 设计 列 边框 效果 


10.1.5 设置 跨 列 显示 


column-span 属性 可 以 定义 跨 列 显示 ， 基 本 语法 如 下 。 


column-span: none | all 


取 值 简单 说 明 如 下 。 
回 none: 不 跨 列 。 
回 all: 横 跨 所 有 列 。 | 
【示例 】 在 上 面 的 示例 基础 上 ， 使 用 column-span 属性 定义 一 级 标题 跨 列 显示 ， 演 示 效 果 如 图 10.5 所 示 。 | 
body { | 
族 定 义 页 面 内 容 显 示 为 3 列 */ 
column-count: 3: 
访 定 义 列 间 距 为 3em， 默 认为 lem*/ 
column-gap: 3em: 
line-height: 2.5em: 
族 定 义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray: 


} 
让 设置 一 级 标题 跨越 所 有 列 显示 */ 
hlf{ 
color: #333333; font-size: 20px: text-align: center: 
padding: 12px: 
语 跨 越 所 有 列 显示 */ 
column-span: all: 
; 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
Pp {color: #333333: font-size: 14px: line-height: 180%;: text-indent: 2em: } | 
| 
| 
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W3C 标 准 


W3C 的 各 来 扶 林 标准 在 努力 喜 到 2014 年 3 月 ,W3C 共 设 。 | 目 画 ，W3CEE 在 探 计 技术 专 
为 各 类 顾 用 的 开 安 打造 一 个 开放 。 j 。 立 5 个 技术 镍 域 ， 开 展 23 个 标准 。 | 。 家 及 个 人 参与 W3C 标 在 制 下 过程 
的 wb 平台 (Open Web i 的 Webizon 计 划 ， 逆 清 期 待 。 


Platform》。 尽 管 这 个 开放 Web 

平台 的 边界 在 不 煌 延伸 ,产业 守 

认为 HTMLS5 有 有 是 这 个 平台 的 梳 。 | 

心 ， 平台 的 部 力 将 依 喜 于 W3C 及 。 ”社区 组 ( 
其 合作 伙伴 正在 创建 的 一 系列 

web 技术, 名 括 CsS. SVG。 j Gom) 。 
WOFF, 语义 Web, 及 XML 和 各 

类 应 用 编程 接口 (AP ， 


WC 于 2014 生 11 月 安 布 了 是 
i 知 W3C 工 作 重点 (2014 征 11 

| 月) "的 六 ,这 旦 最 新 的 一 共 

| 对 W3C 近 其 开展 的 工作 要 点 进行 
;了 时 冯 的 文章 , 阁 述 了 近期 的 工 
| 作 重 点 和 居 先 级 。 


| 图 10.5 ”设计 标题 跨 列 显示 效果 
10.1.6 ”设置 列 高 度 


column-fill 属性 可 以 定义 栏目 的 高 度 是 否 统一 ， 基 本 语法 如 下 。 
column-fill: auto | balance 


取 值 简单 说 明 如 下 。 
回 auto: 列 高 度 自 适应 内 容 。 
回 balance: 所 有 列 的 高 度 以 其 中 最 高 的 一 列 统一 
【示例 】 在 上 面 的 示例 基础 上 ， 使 用 column-fill 属性 定义 每 列 高 度 一 致 
body { 
上 定义 页 面 内 容 显 示 为 3 列 所 
column-count: 3: 
证 定义 列 间距 为 3em， 默 认为 lem*/ 


| 
| 
| 
| 
| 
| 
| 
| 
| column-gap: 3em: 
| 
|] 
| 
| 
| 
| 
| 
| 
| 


line-height: 2.5em: 

族 定 义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray: 

让 设置 各 列 高 度 一 致 */ 


column-fill: balance: 


10.2 旧版 伸缩 盒 


| ”2009 年 ，W3C 提出 一 种 刀 新 的 布局 模型 一 一 伸缩 盒 ( Flexbox ) 布局 ， 它 可 以 简便 、 完 整 、 响 应 式 地 
| 实现 各 种 页 面 布局 ， 自由 设置 多 个 栏目 在 一 个 容器 中 的 分 布 方式 ， 以 及 如 何 处 理 容器 内 可 用 的 空间 。 使 用 
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该 模型 可 以 轻松 创建 自 适应 窗口 的 流动 布局 ,或 者 自 适 应 字体 大 小 的 弹性 布局 。 

W3C 的 伸缩 盒 布 局 分 为 旧版 本 、 新 版 本 ， 以 及 混合 过 渡 版 本 3 种 不 同 的 编码 方式 。 其 中 混合 过 流 版 本 
主要 是 针对 正 10 做 了 兼容 。 本 节 将 重点 介绍 老 版 本 伸缩 盒 模型 的 基本 用 法 ， 下 一 节 再 讲解 新 版 本 伸缩 仿 布 
局 的 基本 用 法 。 

Flexbox 有 4 个 关键 特性 : 方向 、 对 齐 、 次 序 和 弹性 。 下 面 我 们 结合 具体 属性 进行 说 明 。 


| Note 
10.2.1 ”启动 伸缩 盒 


在 旧版 本 中 启动 伸缩 盒 模型 ， 只 需 设 置 容 器 的 display 的 属性 值 为 box ( 或 inline-box )， 用 法 如 下 。 


display: box; 
display: inline-box; 
伸缩 盒 模型 由 以 下 两 部 分 构成 。 


回 父 容器 : 通过 display: box; 或 者 display: inline-box; 启动 伸缩 盒 布 局 功能 。 

回 子 容器 : 通过 box-flex 属性 定义 布局 宽度 ， 定 义 如 何 对 父 容器 的 宽度 进行 分 配 。 
父 容器 又 通过 如 下 属性 定义 包含 容器 的 显示 属性 ， 简 单 说 明 如 下 。 

回 box-orient: 定义 父 容器 里 子 容器 的 排列 方式 ， 是 水 平 还 是 垂直 。 

回 box-direction: 定义 父 容 器 里 的 子 容器 排列 顺序 。 

回 box-align: 定义 子 容 器 的 垂直 对 齐 方式 。 

回 box-pack: 定义 子 容器 的 水 平 对 齐 方式 。 


人 多 注意 : 使 用 旧版 本 伸缩 金 模型 ， 需 要 用 到 各 浏览 器 的 私有 属性 ，Webkit 引擎 支持 -webkit- 前 级 的 和 有 
属性 ，Mozilla Gecko 引擎 支持 -moz- 前 缓 的 私有 属性 ，Presto 引擎 ( 包括 Opera 浏览 器 等 ) | 
持 标准 属性 ，IE 暂 不 支持 旧版 本 仲 缩 爹 模型 。 


10.2.2 ”设置 宽度 


| 
| 
| 
在 默认 情况 下 ， 盒 子 没有 弹性 ， 它 将 尽 可 能 宽 地 使 其 内 容 可 见 ， 且 没有 溢出 ， 其 大 小 由 width 、height、 
min-height、min-width 、max-width 或 者 max-height 属性 值 来 决定 。 | 
使 用 box-flex 属性 可 以 把 默认 布局 变 为 盒 布局 。 如 果 box-flex 的 属性 值 为 1， 则 元 素 变 得 富有 弹性 ， 其 | 

大 小 将 按 下 面 的 方式 计算 。 
回 声明 的 大 小 (width、height、min-width、min-height、max-width、max-height )。 | 
| 

| 

| 

| 

| 

| 

| 

| 


回 父 容器 的 大 小 和 所 有 余下 的 可 利用 的 内 部 空间 。 

如 果 盒 子 没有 声明 大 小 ,那么 其 大 小 将 完全 取决 于 父 容器 的 大 小 ， 即 盒子 的 大 小 等 于 父 容器 的 大 小 乘 
以 其 box-flex 在 所 有 盒子 box-flex 总 和 中 的 百分比 ， 用 以 下 公式 表示 。 

盒子 的 大 小 = 父 容器 的 大 小 * 盒子 的 box-flex / 所 有 盒子 的 box-flex 值 的 和 

余下 的 盒子 将 按照 上 面 的 原则 分 享 剩 下 的 可 用 空间 。 

【示例 】 下 面 的 示例 定义 左 侧 边栏 的 宽度 为 240 像素 ， 右 侧 边栏 的 宽度 为 200 像素 ， 中 间 内 容 版 块 的 宽 ， | 


度 将 由 box-flex 属性 确定 。 详 细 代码 如 下 ， 演 示 效 果 如 图 10.6 所 示 ， 当 调整 窗口 宽度 时 ， 中 间 列 的 宽度 会 
自 适应 显示 ， 使 整个 页 面 总 是 满 窗口 显示 。 | 
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<style type="text/css"> 
#container { 


} 


启 定 义 伸缩 盒 布 局 样式 */ 
display: -moz-box: 

display: -webkit-box: 
display: box: 


#left-sidebar { 


} 


width: 240px; 
padding: 20px: 
background-color: orange: 


#contents { 


} 


族 定 义 中 间 列 宽度 为 自 适应 显示 */ 
-moz-box-flex: 1; 

-webkit-box-flex: 1; 

flex: 1; 

padding: 20px; 

background-color: yellow: 


#right-sidebar { 


1 


width: 200px: 
padding: 20pX: 
background-color: limegreen: 


#left-sidebar, #contents, #right-sidebar { 


} 


让 定义 盒 样式 */ 
-moz-box-sizing: border-box: 
-webkit-box-sizing: border-box: 
box-sizing: border-box: 


</style> 
<div id="container"> 


<div id="left-sidebar"> 
<h2> 宋词 精 选 </h2> 
<u> 
<li><a hre 仁 "> 卜 算 子 : 咏 梅 </a></li> 
<li><a hre 全 "> 声 声 慢 。 寻 寻 砚 砚 </a></li> 
<li><a hre 仁 "> 雨 霖 铃 寒蝉 证 切 </a></li> 
<li><a hre 合 "> 卜 算 子 . 咏 梅 </a></li> 
<li><a hre 全 "> 更 多 </a></i> 
</ul> 
</div> 
<div id="contents"> 
<hl> 水 调 歌 头 明月 几时 有 </h1> 
<h2> 苏轼 </h2> 
<p> 两 辰 中 秋 ， 欢 饮 达 旦 ， 大 醉 ， 作 此 篇 ， 兼 怀 子 由 。</p> 


<p> 明月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 宫 阅 ， 今夕 是 何 年 。 我 欲 乘 风 归 去 ， 又 恐 琼 楼 玉宇 ， 高 处 不 胜 


寒 。 起 舞 弄 清 影 ， 何 似 在 人 间 ? </p> 
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<p> 转 朱 阁 ， 低 绮 户 ， 照 无 眠 。 不 应 有 恨 ， 何 事 长 向 别 时 加 ?人 有 斐 欢 离合 ， 月 有 阴 晴 圆 缺 ， 此 事 十 难 ， 
全 。 但 愿 人 长 久 ， 千里 共 侨 娟 。 </p> 
</div> 
<div id="right-sidebar"> 
<h2> 词 人 列表 </h2> 一 
<Ul> 
<li><a hre 全 "> 陆游 </a></li> 


<li><a hre 人 "> 李清照 </a></li> 
<li><a hre 伍 "> 苏 氏 </a></li> 
<li><a hre 全 "> 柳 永 </a></li> 


六 © [©® localhosta0e0/mysiteNest html 


水 调 歌 头 " 明月 几时 有 

苏轼 

两 于 4 秋天 这 日， 大 杯 ， 作 此 局， 重任 了 也- 
明月 几时 有 1 把 秆 问 青 天 。 不知 天 上 富 辕 ， 今夕 星 何 年。 我 
和 


转 示 阅 ， 低 终 户 ， 下 元 虑 。 不 应 有 帐 ， 何 事 长 向 别 8j 面 ? 人 
了 请 有 朋 哺 园 缺 ， 此 训 古 玲 全 。 但 原 人 长 久 ， 干 


图 10.6 定义 自 适 应 宽度 


10.2.3 ”设置 顺序 


使 用 box-ordinal-group 属性 可 以 改变 子 元 素 的 显示 顺序 。 语 法 格式 如 下 。 
box-ordinal-group: <integer> 


<integer> 用 整数 值 来 定义 伸缩 盒 对 象 的 子 元 素 显示 顺序 ， 上 默认 值 为 1。 浏览 器 在 显示 时 ， 将 根据 该 值 | | 
从 小 到 大 来 显示 这 些 元 素 。 | 
【示例 】 以 上 节 的 示例 为 基础 ， 在 左 栏 、 中 栏 、 右 栏 中 分 别 加 入 一 个 box-ordinal-group 属性 ， 并 指定 显 
示 的 序号 ， 这 里 将 中 栏 设置 为 1， 右 栏 设 置 为 2， 左 栏 设置 为 3， 则 可 以 发 现 3 栏 显示 顺序 发 生 了 变化 , 演 | 
示 效 果 如 图 10.7 所 示 。 | 
Heft-sidebar { | 
-moz-box-ordinal-group: 3: | 
-webkit-box-ordinal-group: 3: | 
| 

| 

| 


box-ordinal-group: 3: 
} 
#contents { 

-moz-box-ordinal-group: 1: 
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-webkit-box-ordinal-group: 1: 
box-ordinal-group: 1: 


} 

#right-sidebar { 
-moz-box-ordinal-group: 2; 
-webkit-box-ordinal-group: 2; 
box-ordinal-group: 2: 

} 
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水 调 歌 头 " 明月 几时 有 

苏轼 

中 秋水 似 过量 ， 太 村 ， 介 此 玉生 人 由。 
/有 1 拓 而 天 。 不 如 天 上 并 .信和 .全 
ee 


产 ， 了 无 联 。 不 应 有 供 。 何 事 长 个 8 可 ?人 


ed 
六 并 六 让 ， 月 有 了 轩 六 说 ， 虑 事 古 入 主 。 介 可 人 长 入， 千 
里 


图 10.7 定义 列 显示 顺序 


10.2.4 设置 方向 


使 用 box-orient 可 以 定义 元 素 的 排列 方向 ， 语 法 格式 如 下 。 
box-orient: horizontal | Vertical | inline-axis | block-axis 


取 值 简单 说 明 如 下 。 

回 horizontal: 设置 伸缩 盒 对象 的 子 元 素 从 左 到 右 水 平 排列 。 

vertical: 设置 伸缩 盒 对 象 的 子 元 素 从 上 到 下 纵向 排列 。 

回 inline-axis: 设置 伸缩 盒 对 象 的 子 元 素 沿 行 轴 排 列 。 

回 block-axis: 设置 伸缩 盒 对 象 的 子 元 素 沿 块 轴 排 列 。 

【示例 】 针 对 上 面 的 示例 ， 在 <div id="container"> 标签 样式 中 加 入 box-orient 属性 ， 并 设 定 属性 值 为 
vertical， 即 定义 内 容 以 垂直 方向 排列 ， 则 代表 左 侧 边栏 ， 中 间 内 容 ， 右 侧 边栏 的 3 个 div 元 素 的 排列 方向 将 
从 水 平方 向 改变 为 垂直 方向 ， 演 示 效 果 如 图 10.8 所 示 。 

#container { 
族 定 义 伸缩 盒 布局 样式 */ 
display: -moz-box: 
display: -webkit-box: 
display: box: 
启 定 义 从 上 到 下 排列 显示 */ 
-moz-box-orient: vertical: 
-webkit-box-orient: vertical: 
box-orient: vertical: 
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水 调 歌 头 。 明月 几时 有 


苏轼 
两 搬 中 款 ， 容 饮 达 旦 ， 大 豌 ， 作 此 篇 ， 繁 环 子 由 
RA 把 酒 问 译 天 。 不 知 天 上 官 阅 ， 今 少 是 体重。 我 认 绕 风 归 去 ， 又 于 以 玉宇 ， 高 处 不胜 寒 。 起 羌 奉 清 彩 , 何 似 


的: 司 绎 户 ， 风 无 眠 。 不 应 有 展 ， 何 事 长 向 8 时 团 ? 人 有 莫 允 高 合 ， 有 有 阳 铺 国 缺 ， 此 事 古 难 全 。 但 原 人 长 义 , 千里 


图 10.8 定义 列 显示 方向 
使 用 box-direction 属性 可 以 让 各 个 子 元 素 反 向 排序 ， 语 法 格式 如 下 。 
box-direction: normal | reverse 
取 值 简单 说 明 如 下 。 


回 normal: 设置 伸缩 盒 对 象 的 子 元 素 按 正常 顺序 排列 。 
回 ”reverse: 反 转 伸缩 例 对 象 的 子 元 素 的 排列 顺序 。 


10.2.5 ”设置 对 齐 方式 


使 用 box-pack 可 以 设置 子 元 素 水 平方 向 对 齐 方式 ， 语 法 格式 如 下 。 
box-pack: start | center | end | justify 


取 值 简单 说 明 如 下 。 

回 start: 设置 伸缩 例 对 象 的 子 元 素 从 开始 位 置 对 齐 ， 为 默认 值 。 

回 center: 设置 伸缩 盒 对 象 的 子 元 素 居中 对 齐 。 

回 end: 设置 伸缩 盒 对 象 的 子 元 素 从 结束 位 置 对 齐 。 

回 justify: 设置 或 伸缩 盒 对 象 的 子 元 素 两 端 对 齐 。 

使 用 box-align 可 以 设置 子 元 素 垂 直方 向 的 对 齐 方式 ， 语 法 格式 如 下 。 
box-align: start | end | center | baseline | stretch 


取 值 简单 说 明 如 下 。 

start: 设置 伸缩 盒 对 象 的 子 元 素 从 开始 位 置 对 齐 。 
center: 设置 伸缩 盒 对 象 的 子 元 素 居 中 对 齐 。 

end: 设置 伸缩 盒 对 象 的 子 元 素 从 结束 位 置 对 齐 。 
baseline: 设置 伸缩 盒 对 象 的 子 元 素 基线 对 齐 。 

回 stretch: 设置 伸缩 盒 对 象 的 子 元 素 自 适应 父 元 素 尺寸 。 


回 
回 
回 
回 


【示例 】 在 下 面 的 示例 中 有 一 个 <div class="login"> 容器 ， 其 中 包含 一 个 登录 表单 对 象 ， 为 了 方便 练习 ，| 
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本 例 使 用 一 个 <img> 标签 模拟 ， 然 后 使 用 box-pack 和 box-align 属性 让 表单 对 象 在 <div class="login"> 容器 的 
正中 央 显 示 。 同 时 ,设计 <div class="login"> 容器 高 度 和 宽度 都 为 100%， 这 样 就 可 以 让 表单 对 象 在 窗口 中 央 
位 置 显示 ,具体 实现 代码 如 下 ， 设 计 效 果 如 图 10.9 所 示 。 
<style type="text/css"> 
让 清除 页 边 距 */ 
body { margin: 0: padding: 0; } 
div { position: absolute: } 
.bg {/* 设计 遮 单 层 */ 
width: 100%; height: 100%; 
background: #000: opacity: 0.7: 


login { 
语 满 屏 显 示 */ 
width: 100%: height: 100%: 
必定 义 伸缩 盒 布局 样式 */ 
display: -moz-box: 
display: -webkit-box: 
display: box: 
让 垂直 居中 显示 */ 
-moz-box-align: center: 
-webkit-box-align: center; 
box-align: center: 
店 水 平 居 中 显示 */ 
-moz-box-pack: center: 
-webkit-box-pack: center: 
box-pack: center: 


} 

</style> 

<div class="web"><img src="images/bg.png" /></div> 
<div class="bg"></div> 

<div class="login"><img src="images/login.png" /></div> 
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图 10.9 设计 登录 表单 在 中 央 显 示 
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伸缩 盒 模型 优化 了 UI 布局 ， 


10.3.1 


10.3 ”新 版 伸缩 盒 


可 以 简单 地 使 一 个 元 素 居中 ( 包括 水 平和 垂直 居中 )， 可 以 扩大 或 收缩 元 | 
可 以 改变 布局 顺序 等 。 本 节 将 重点 介绍 新 版 本 伸缩 盒 模型 的 基本 用 法 。 


认识 Flexbox 系统 


Flexbox 系统 由 伸缩 容器 和 伸缩 项 目 组 成 。 


这 


E 伸 缩 容 器 中 ， 


目 内 的 一 切 元 素 都 不 受 影响 。 


伸缩 项 目 沿 着 伸缩 容器 内 的 一 


每 一 个 子 元 素 都 是 一 个 伸缩 项 目 ， 伸 缩 项 目 可 以 是 任意 数量 的 ， 伸 缩 容器 外 和 伸缩 项 


个 伸缩 行 定位 ， 通 常 每 个 伸缩 容器 只 有 一 个 伸缩 行 。 在 默认 情况 下 ， 介 


缩 行 和 文本 方向 一 致 : 从 左 至 右 ， 从 上 到 下 。 


常规 布局 是 基于 块 和 文本 流 方向 ， 


布局 的 解释 。 


图 10.10 ”flex 布局 模式 


而 flex 布局 是 基于 flex-flow 的 。 如 图 10.10 所 示 是 W3C 规范 对 flex 


伸缩 项 目 是 沿 着 主轴 ( main axis )， 从 主轴 起 点 (main-start ) 到 主轴 终点 ( main-end )， 或 者 沿 着 侧 轴 
(cross axis )， 从 侧 轴 起 点 ( cross-start ) 到 侧 轴 终点 ( cross-end ) 排列 。 
主轴 ( main axis ): 伸缩 容器 的 主轴 ， 伸 缩 项 目 主要 沿 着 这 条 轴 进 行 排列 布局 。 注 意 ， 它 不 一 定 是 | 
水 平 的 ， 这 主要 取决 于 justify-content 属性 设置 。 
主轴 起 点 ( main-start ) 和 主轴 终点 ( main-end ): 伸缩 项 目 放置 在 伸缩 容器 内 从 主轴 起 点 ( main- 
start ) 向 主轴 终点 (main-start ) 的 方向 。 
主轴 尺寸 (main size ): 伸缩 项 目 在 主轴 方向 的 宽度 或 高 度 就 是 主轴 的 尺寸 。 条目 主要 的 大 小 
属性 是 width 或 height 属 性， 由 哪 一 个 对 着 主轴 方向 决定 。 

侧 轴 ( cross axis ): 垂直 于 主轴 的 称 为 侧 轴 。 它 的 方向 主要 取决 于 主轴 方向 。 
侧 轴 起 点 (cross-start ) 和 侧 轴 终点 ( cross-end ): 伸缩 行 的 配置 从 容器 的 侧 轴 起 点 边 开始 ， 入 全 | | 


回 


回 


回 


回 
回 


[wl 


终点 边 结束 。 


侧 轴 尺寸 ( cross size ): 伸缩 项 目 在 侧 轴 方 向 的 宽度 或 高 度 就 是 项 目的 侧 轴 长 度 ， 伸 缩 项 目的 侧 轴 | 


长 度 属性 是 width 或 height 


属性 ， 由 哪 一 个 对 着 侧 轴 方 向 决定 。 


一 个 伸缩 项 目 就 是 一 个 伸缩 容器 的 子 元 素 ， 伸 缩 容器 中 的 文本 也 被 视 为 一 个 伸缩 项 目 。 He | 


内 容 与 普通 文本 流 一 样 。 例 如 ， 当 一 个 伸缩 项 目 被 设置 为 浮动 时 ， 用 户 依然 可 以 在 这 个 伸缩 项 目 中 放置 一 | 


i 


7HMis 各 动 Wet 开发 以 入 门 到 将 胡 ( 稚 课 靖 病 县 ) 


通过 设置 元 素 的 display 属性 为 flex 或 inline-flex 定义 一 个 伸缩 容器 。 设 置 为 flex 的 容器 被 泻 染 为 一 个 
| 块 级 元 素 ， 而 设置 为 inline-flex 的 容器 则 泻 染 为 一 个 行内 元 素 。 具 体 语法 如 下 。 


display: flex | inline-flex: 


面 语法 定义 了 伸缩 容器 ， 属 性 值 决定 容器 是 行内 显示 ， 还 是 块 显示 ， 它 的 所 有 子 元 素 将 变 成 flex 文 


| 档 流 ， A 目 。 


此 时 ，CSS 的 columns 属性 在 伸缩 容器 上 没有 效果 ， 


上 也 没有 效果 。 


同时 float、clear 和 vertical-align 属性 在 伸缩 项 目 


【示例 】 下 面 的 示例 设计 了 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 演 示 效 果 如 图 10.11 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
‘width: S00px; height: 300px; 
border: solid 1px red; 
) 
.flex-item { 
background-color: blue: 
width: 200px: height: 200px: 
margin: 10px: 
</style> 
<div class="flex-container"> 
<div class="flex-item"> 伸缩 项 目 1</div> 
<div class="flex-item"> 伸缩 项 目 2</div> 
<div class="flex-item"> 伸缩 项 目 3</div> 
<div class="flex-item"> 伸缩 项 目 4</div> 
</div> 


DY localhosea080/mysite x 
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图 10.11 定义 伸缩 盒 布局 
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10.3.3 ”设置 主轴 方向 


使 用 flex-direction 属性 可 以 定义 主轴 方向 ， 它 适用 于 伸缩 容器 。 具 体 语法 如 下 。 


flex-direction: row | row-reverse | column | column-reverse 


取 值 说 明 如 下 。 

回 row: 主轴 与 行内 轴 方 向 作为 默认 的 书写 模式 。 即 横向 从 左 到 右 排 列 ( 左 对 齐 )。 
回 TIow-Teverse: 对 齐 方式 与 row 相反 。 

回 colunmmn: 主轴 与 块 轴 方 向 作为 默认 的 书写 模式 。 即 纵向 从 上 往 下 排列 ( 顶 对 齐 )。 
回 ”column-reverse: 对 齐 方式 与 column 相反 。 


【示例 】 在 上 节 示 例 的 基础 上 ， 本 例 设计 一 个 伸缩 容器 ， 其 中 包 全 
上 往 下 排列 ， 演 示 效 果 如 图 10.12 所 示 。 


<style type="text/css"> 


.flex-container { 


display: -webkit-flex: 


display: flex; 


-webkit-flex-direction: column:; 
flex-direction: column; 
width: S00px: height: 300px: border: solid 1px red: 


} 


.flex-item { 


background-color: blue; 
width: 200px: height: 200px; 


margin: 10px: 
} 
</style> 


D localhost8080/mysite/ x W—\ 
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图 10.12 定义 伸缩 项 目 从 上 往 下 布局 
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bw 


a 
10.3.4 ”设置 行 数 


| 格式 如 下 。 


flex-wrap: nowrap | wrap | wrap-reverse 


取 值 说 明 如 下 。 
回 nowrap: flex 容器 为 单行 。 该 情况 下 flex 子 项 可 能 会 溢出 容器 。 


加 ”wrap-reverse: 反 转 wrap 排列 。 


| 项 目 多 行 排列 ， 演 示 效 果 如 图 10.13 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
-webkit-flex-wrap: wrap; 
flex-wrap: wrap; 
width: S00px; height: 300px; border: solid 1px red: 


.flex-item { 

background-color: blue: 

width: 200px; height: 200px; 
| margin: 10px: 
| 
| } 
| </style> 
| 
| 
| 
| 全 3 & [Glocalhost/mysite/testhtml 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 一 
| 图 10.13 定义 伸缩 项 目 多 行 布局 
| 【补充 】 


| flex-flow 属性 是 flex-direction 和 flex-wrap 属性 的 复合 属性 ， 适 用 于 伸缩 容器 。 该 
| 缩 容器 的 主轴 和 侧 轴 。 其 默认 值 为 row nowrap。 具 体 语法 如 下 。 


sol 


flex-wrap 定义 伸缩 容器 是 单行 还 是 多 行 显示 伸缩 项 目 , 侧 轴 的 方向 决定 了 新 行 堆放 的 方向 。 具体 语法 


回 wrap: flex 容器 为 多 行 。 该 情况 下 flex 子 项 溢出 的 部 分 会 被 放置 到 新 行 ， 子 项 内 部 会 发 生 断 行 。 


【示例 】 在 上 面 示例 的 基础 上 ， 下 面 示例 将 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 然 后 定义 伸缩 


属性 可 以 同时 定义 伸 
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flex-flow: <' flex-direction > || < flex-wrap > 


取 值 说 明 如 下 。 | 
回 <'flex-direction'>: 定义 弹性 盒子 元 素 的 排列 方向 。 | 
回 <'flex-wrap'>: 控制 flex 容器 是 单行 还 是 多 行 。 | 


10.3.5 ”设置 对 齐 方 式 


. 主轴 对 齐 | 
eo 该 属性 适用 于 伸缩 容器 。 具 体 语法 如 下 。 
| 


justify-content: flex-start | flex-end | center | space-between | space-around 


取 值 说 明 如 下 : 

回 Hex-start: 为 默认 值 ， 伸 缩 项 目 向 一 行 的 起 始 位 置 靠 齐 。 | 

回 flex-end: 伸缩 项 目 向 一 行 的 结束 位 置 靠 齐 。 | 

回 “center: 伸缩 项 目 向 一 行 的 中 间 位 置 靠 齐 。 

回 space-between: 伸缩 项 目 会 平均 地 分 布 在 行 里 。 第 一 个 伸缩 项 目 在 一 行 中 的 最 开始 位 置 ， 最 后 一 个 
伸缩 项 目 在 一 行 中 的 最 终点 位 置 

回 space-around: 伸缩 项 目 会 平均 地 分 布 在 行 里 ， 两 端 保留 一 半 的 空间 

上 述 取 值 比较 效果 如 图 10.14 所 示 


(a ) flex-start (b ) flex-end (c ) center 
(d ) space-between (e ) space-around 


图 10.14 ”主轴 对 齐 示意 图 


| 
| 
| 
| 
2. 侧 轴 对 齐 | 
align-items 定义 伸缩 项 目 在 侧 轴 上 的 对 齐 方 式 ， 该 属性 适用 于 伸缩 容器 。 具 体 语 法 如 下 。 | 
| 
| 
| 
| 


align-items: flex-start | flex-end | center | baseline | stretch 


区 值 说 明 如 下 。 

flex-start: 伸缩 项 目 在 侧 轴 起 点 边 的 外 边 距 紧 靠 住 该 行 在 侧 轴 起 始 的 边 。 

flex-end: 伸缩 项 目 在 侧 轴 终 点 边 的 外 边 距 靠 住 该 行 在 侧 轴 终点 的 边 。 

center: 伸缩 项 目的 外 边 距 盒 在 该 行 的 侧 轴 上 居中 放置 。 | 
baseline: 伸缩 项 目 根据 它们 的 基线 对 齐 。 | 
stretch: 默认 值 ， 伸 缩 项 目 拉 伸 填 充 整个 伸缩 容器 。 此 值 会 使 伸缩 项 目的 外 边 距 盒 的 尺寸 在 遵照 | 
min/max-width/height 属性 的 前 提 下 尽 可 能 接近 所 在 行 的 尺寸 。 | 
上 述 取 值 比较 效果 如 图 10.15 所 示 。 | 


加 图 图 罗 辐 


wal 
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(a) flex-start (b) flex-end (c ) center 


(d) baseline (e) stretch 
图 10.15 便 轴 对 齐 示意 图 


3。 伸缩 行 对 齐 


align-content 定义 伸缩 行 在 伸缩 容器 里 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 类 似 于 伸缩 项 目 在 主轴 上 


| 人 ye 二 - 样 ， 但 本 属性 在 只 有 一 行 的 伸缩 容器 上 没有 效果 。 有 具体 语法 如 下 。 


align-content: flex-start | flex-end | center | space-between | space-around | stretch 


取 值 说 明 如 下 。 

回 flex-start: 各 行 向 伸缩 容器 的 起 点 位 置 堆 秋 
回 flex-end: 各 行 向 伸缩 容器 的 结束 位 置 堆 重 。 
回 “center: 各 行 向 伸缩 容器 的 中 间 位 置 堆 重 。 
回 space-between: 各 行 在 伸缩 容器 中 平均 分 布 。 
回 
加 
四 


space-around: 各 行 在 伸缩 容器 中 平均 分 布 ， 在 两 边 各 有 一 半 的 空间 。 
stretch: 默认 值 ， 各 行将 会 伸展 以 占用 剩余 的 空间 
述 取 值 比较 效果 如 图 10.16 所 示 


) flex-start (b) flex-end (c) center 


) space-between (e) space-around (f) stretch 


图 10.16 ”伸缩 行 对 齐 示意 图 


【示例 】 下 面 的 示例 设计 了 容器 中 的 文本 行 水 平和 垂直 都 居中 显示 ， 演 示 效 果 如 图 10.17 所 示 。 
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<style> 


| 
| 
| 
| 
.CenterMe { | 
font-size: 2rem:; | 
height: 300px:; | 
border: solid 2px red: | 
display: flex; | 
align-items: center; 

justify-content: center; 


Note 


3} 
</style> 

<pre class="CenterMe"> 
display: flex; 
align-items: center: 
justify-content: center: 
/pre> 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
display: flex 把 当前 元 素 设置 为 一 个 Flexbox， 而 不 是 block 或 inline-block。align-items 属性 设置 在 | 
| 
| 
| 
| 
| 
| 
| 
| 
| 


Flexbox 中 沿 交叉 轴 垂 直 居 中 文本 ，justify-content 属性 设置 内 容 沿 主轴 居中 。 


© | © Ilocalhosttesthtml 


display: flex: 
align-items: center; 
justify-content: center:; 


10.3.6 ”设置 伸缩 项 目 


伸缩 项 目 都 有 一 个 主轴 长 度 (Main Size ) 和 一 个 侧 轴 长 度 ( Cross Size )。 主 轴 长 度 是 伸缩 项 目 在 主轴 
上 的 尺寸 ， 侧 轴 长 度 是 伸缩 项 目 在 侧 轴 上 的 尺寸 。 一 个 伸缩 项 目的 宽 或 高 取决 于 伸缩 容器 的 轴 ， 可 能 就 是 
它 的 主轴 长 度 或 侧 轴 长 度 。 下 面 的 属性 适用 于 伸缩 项 目 ， 可 以 调整 伸缩 项 目的 行为 。 | 
1. 显示 位 置 
order 属性 可 以 控制 伸缩 项 目 在 伸缩 容器 中 的 显示 顺序 ， 具体 语 法 如 下 。 


order: <integer> 


<integer> 用 整数 值 来 定义 排列 顺序 ， 数 值 小 的 排 在 前 面 。 可 以 为 负 值 。 


| 
| 
| 
| 
| 
| 
| 
| 
图 10.17 定义 伸缩 行 居中 对 齐 | 
| 
| 
| 
| 
| 
| 
| 
| 
| 


war3s 


| 
EA 


ga Vs 


2. 扩展 空间 
flex-grow 属性 可 以 定义 伸缩 项 目的 扩展 能 力 ， 决 定 伸缩 容器 剩余 空间 按 比例 应 扩展 多 少 空 间 。 具 体 语 


， | 法 如 下 。 


flex-grow: <number> 


<number> 用 数值 来 定义 扩展 比率 。 不 允许 负 值 ， 默 认 值 为 0。 
如 果 将 所 有 伸缩 项 目的 flex-grow 设置 为 1， 那么 每 个 伸缩 项 目 将 设置 为 一 个 大 小 相等 的 剩余 空间 。 如 


果 给 其 中 一 个 伸缩 项 目 设置 flex-grow 为 2， 那 么 这 个 伸缩 项 目 所 占 的 剩余 空间 是 其 他 伸缩 项 目 所 占 剩 余 空 
| 间 的 两 倍 。 


3. 收缩 空间 
flex-shrink 可 以 定义 伸缩 项 目 收缩 的 能 力 ， 与 flex-grow 功能 相反 ,具体 语法 如 下 。 


flex-shrink: <number> 


<number> 用 数值 来 定义 收缩 比率 。 不 允许 负 值 ， 默 认 值 为 1。 
4. 伸缩 比率 
flex-basis 可 以 设置 伸缩 基准 值 ， 剩 余 的 空间 按 比率 进行 伸缩 。 具 体 语法 如 下 。 


flex-basis: <length> | <percentage> | auto | content 


取 值 说 明 如 下 。 

回 <length>: 用 长 度 值 来 定义 宽度 。 不 允许 负 值 。 

回 <percentage>: 用 百分比 来 定义 宽度 。 不 允许 负 值 。 

回 auto: 无 特定 宽度 值 ， 取 决 于 其 他 属性 值 。 

回 content: 基于 内 容 自动 计算 宽度 。 

【补充 】 

flex 是 flex-grow 、flex-shrink 和 flex-basis3 个 属性 的 复合 属性 ， 该 属性 适用 于 伸缩 项 目 。 其 中 第 二 个 和 


第 三 个 参数 ( flex-shrink 、flex-basis ) 是 可 选 参数 。 默 认 值 为 “0 1 auto"。 具 体 语法 如 下 。 


flex: none | [ <'flex-grow'> <'flex-shrink’>? || <'flex-basis’> ] 
5. 对 齐 方式 
align-self 用 来 在 单独 的 伸缩 项 目 上 获 写 默认 的 对 齐 方式 。 具 体 语法 如 下 。 


align-self: auto | flex-start | flex-end | center | baseline | stretch 


其 属性 值 与 align-items 的 属性 值 相同 。 
【示例 1】 以 之 前 面 的 示例 为 基础 ， 定 义 伸缩 项 目 在 当前 位 置 向 右 错 移 一 个 位 置 ， 即 将 第 一 个 项 目 移 到 


第 二 个 项 目的 位 置 上 ,将 第 二 个 项 目 移 到 第 三 个 项 目的 位 置 上 ,将 最 后 一 个 项 目 移 到 第 一 个 项 目的 位 置 上 ， 
| 演示 效果 如 图 10.18 所 示 。 


<style type="text/css"> 
.flex-container { 

display: -webkit-flex: 

display: flex: 

width: S00px: height: 300px: border: solid 1px red: 
} 


.274 。 
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.flex-item { background-color: blue: width: 200px: height: 200px: margin: 10px: } 


.flex-item: nth-child(0){ 
-webkit-order: 4: 
order: 4: 

} 

.flex-item: nth-child(1){ 
-webkit-order: 1; 
order 1; 

} 

.flex-item: nth-child(2){ 
-webkit-order: 2; 
order: 2; 

} 

‘flex-item: nth-child(3){ 
-webkit-order: 3; 
Order: 3; 

} 

</style> 


【示例 2】margin: auto; 在 伸缩 盒 中 具有 强大 的 功能 ， 一 个 属性 值 为 "auto" 的 margin 会 合并 剩余 的 空间 。 | 
它 可 以 用 来 把 伸缩 项 目 挤 到 其 他 位 置 。 下 面 的 示例 利用 margin-right: auto;， 


果 如 图 10.19 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 


display: flex: 
width: 500px: height: 300px: border: solid 1px red: 
} 
.flex-item { 
background-color: blue: width: 200px: height: 200px: 
margin: auto: 
1 
</style> 


<div class="flex-container"> 
<div class="flex-item"> 伸缩 项 目 </div> 
</div> 


EA 
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图 10.18 定义 伸缩 项 目 错位 显示 
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图 10.19 定义 伸缩 项 目 居中 显示 


ars 


定义 包含 的 项 目 居中 显示 , 效 ， 


及 


Note 


人 [7ps5 各 色 Wet 开发 从 入 门 到 茜 适 ( 艇 神 茜 纺 上) 


| 10.4 ”浏览 器 支持 和 伸缩 盒 版 本 先 代 


在 更 新 到 如 今 相 对 稳定 的 版 本 之 前 ，Flexbox 经 过 了 3 次 重大 的 迭代 。 从 2009 年 版 (https: /fwwww3.org/ 
| TR/2009/WD-css3-flexbox-20090723/ ) 到 2011 年 版 (https: //www.w3.org/TR/2011/WD-css3-flexbox-20111129/ )， 
| 再 到 2014 年 版 ( https: //www.w3.org/TR/css-flexbox-1/ )。 前 后 语法 变化 之 大 非常 明显 。 这 几 个 不 同 版 本 的 
| 规范 对 应 着 不 同 的 实现 。 需 要 关注 哪些 版 本 ， 取 决 于 需要 支持 的 浏览 器 。 


041 浏览 器 对 Flexbox 的 支持 


首先 明确 ，IE9 及 以 下 版 本 不 支持 Flexbox。 对 于 其 他 浏览 器 ( 包括 所 有 移动 端 浏 览 器 )， 有 方法 可 以 享 
| 用 Flexbox 的 绝 大 多 数 特 性 ， 具 体 支持 信息 可 以 访问 http: //caniuse.com/ 进行 查询 。 
| 如 果 把 Flexbox 新 语法 、 旧 语法 和 混合 语法 混合 在 一 起 使 用 ， 就 可 以 让 浏览 器 得 到 完美 的 展示 。 当 然 ， 
| 在 使 用 Flexbox 时 ， 应 该 考虑 不 同 浏览 器 的 私有 属性 ， 如 Chrome 要 添加 前 缀 -webkit-，Firefox 要 添加 前 

级 -moz- 等 。 
【示例 】 设 置 Flexbox 相关 的 3 个 属性 和 值 。 
.flex { 

display: flex: 

flex: 1; 

justify-content: space-between: 


这 里 使 用 了 比较 新 的 语法 。 但 是 ， 要 想 支 持 安 卓 浏览 器 (v4 及 以 下 版 本 操作 系统 ) 和 正 10， 最 终 代 码 
需 这 样 写 : 


| 
| 

| 

| 

| flex { 

| display: -webkit-box: 

| display: -webkit-flex: 

| display: -ms-flexbox: 

| display: flex: 

| -webkit-box-flex: 1: 

| -webkit-flex: 1: 

| -ms-flex: 1: 

| flex: 1: 

| -webkit-box-pack: justify: 

| -webkit-justify-content: space-between: 
| -ms-flex-pack: justify: 

| justify-content: space-between: 

| 

| 

| 


} 


这 些 代码 一 个 都 不 能 少 ， 因 为 每 家 浏览 器 厂商 都 有 自己 的 前 级。 例如 ，-ms- 是 Microsoft，-webkit- 是 
| WebKit，-moz- 是 Mozilla。 于 是 ， 每 个 新 特性 要 在 所 有 浏览 器 中 生效 ， 就 得 写 好 几 遍 。 首 先是 带 各 家 厂商 
| 前 缀 的 ,最 后 一 行 才 是 W3C 标准 规定 的 。 
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前 级 来 保证 某 些 特性 跨 浏览 器 可 用 。 

为 了 避免 这 种 烦琐 的 操作 ， 同 时 还 能 轻松 准确 地 加 上 CSS 前 级 ， 用 户 可 以 使 用 Autoprefixer 自动 添加 
前 绥 。 这 是 一 个 快速 、 准 确 而 且 安装 简便 的 PostCSS 插件 。 

Autoprefixer 针对 各 种 情况 提供 了 很 多 版 本 ， 使 用 它 甚至 不 需要 命令 行 构建 工具 ( Gulp 或 Grunt )。 此 外 A 
还 有 针对 Atom、Brackets 和 Visual Studio 的 版 本 。 为 了 节省 版 面 ， 我 们 在 示例 代码 中 可 能 会 省 略 这 些 烦 琐 | 
的 前 级 ， 仅 给 出 W3C 标准 用 法 。 


这 是 让 Flexbox 跨 浏览 器 的 唯一 有 效 方式 。 如 今 ， 虽 然 厂商 很 少 再 加 前 级 ,但 在 可 见 的 未 来 ， 仍 然 需要 | 


简单 比较 Flexbox 版 本 如 下 。 

回 2009 年 版 本 ( 旧版 本 ): display:box:。 

回 2011 年 版 本 (混合 版 本 ): display:flexbox;。 

回 2014 年 版 本 ( 新 版 本 ): display:flex:。 

具体 说 明 如 下 。 

1. 浏览 器 支持 状况 

各 主流 浏览 器 对 Flexbox 规范 不 同 版 本 的 支持 如 表 10.1 所 示 。 


表 10.1 浏览 器 对 Flexbox 规范 版 本 的 支持 


10.4.2 比较 Flexbox 新 旧版 本 


规范 版 本 Firefox Chrome Safari 
新 版 本 (标准 版 ) 29+、21~28( -webkit- ) 
混合 版 | | | 


老 版 本 [| 3~21(-moz-) “| <21(-webkit ) 3~6( -webkit- ) 


2. 开启 Flexbox 
不 同 Flexbox 版 本 定义 一 个 元 素 为 伸缩 容器 的 方法 比较 如 表 10.2 所 示 


表 10.2 比较 启动 Flexbox 


规范 版 本 属性 名 称 块 伸缩 容器 内 联 伸缩 容器 
新 版 本 (标准 版 ) | display flex | intine-flex 
混合 版 | display flexbox | inline-flexbox 
老 版 本 display box inline-box 
3. 主轴 对 齐 方式 


不 同 Flexbox 版 本 指定 伸缩 项 目 沿 主轴 对 章 方式 的 取 值 比较 如 表 10.3 所 示 。 


表 10.3 ”比较 主轴 对 齐 方式 


start center justify distribute 
新 版 本 ( 标准 版 ) | justify-content flex-start Center space-between space-around 
混合 版 | flex-pack Start Center justify distribute 


老 版 本 X-] Start Center justify N/A 


"a 


ee 2 ( 微 裸 精 编 版 ) 


ey 


start: 开始 位 置 。 

center: 中 间 位 置 。 

end: 结束 位 置 。 

justify: 两 端 对 齐 。 
distribute: 均匀 对 齐 。 
N/A: 表示 不 适用 的 意思 。 


回国 回 加 回回 注 


4. 侧 轴 对 齐 方式 
不 同 Flexbox 版 本 指定 伸缩 项 目 沿 侧 轴 对 齐 方 式 的 取 值 比较 如 表 10.4 所 示 。 


表 10.4 ”比较 侧 轴 对 齐 方式 
规范 版 本 


start baseline stretch 
新 版 本 ( 标准 版 ) align-items flex-start flex-end baseline stretch 


疾 提示 : 
baseline: 基线 对 齐 。 
回 stretch: 伸展 对 齐 。 


5， 单个 伸缩 项 目 侧 轴 对 齐 方式 
不 同 Flexbox 版 本 指定 单个 伸缩 项 目 沿 侧 轴 对 齐 方 式 的 取 值 比较 如 表 10.5 所 示 


表 10.5 比较 单个 伸缩 项 目 侧 轴 对 齐 方式 


规范 版 本 属性 名 称 auto start center end baseline | stretch 
新 版 本 ( 标准 版 ) | align-self auto | flex-start | center flex-end | baseline | stretch 
混合 版 | flex-item-align auto Start | center end | baseline | stretch 
老 版 本 N/A 


6. 伸缩 项 目 行 对 齐 方式 
不 同 Flexbox 版 本 指定 伸缩 项 目 行 在 侧 轴 的 对 齐 方式 的 取 值 比较 如 表 10.6 所 示 。 


表 10.6 比较 伸缩 项 目 行 对 齐 方式 


规范 版 本 属性 名 称 start center end justify distribute stretch 
新 版 本 ( 标准 版 ) | align-content flex-start center flex-end | space-between | space-around stretch 
混合 版 flex-line-pack start center |end justify | distribute stretch 
| 老 版 本 NA 


ae 
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4 全 注意 : 只 有 伸缩 项 目 有 多 行 时 才 生效 ， 这 种 情况 只 有 伸缩 容器 设置 了 flex-wrap 为 wiap 时 ， 并 且 没 有 
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足够 的 空间 把 伸缩 项 目 放 在 同一 行 中 。 这 个 将 对 每 一 行 起 作用 而 不 是 对 每 一 个 伸缩 项 目 起 作用 。 


7. 显示 顺序 


不 同 Flexbox 版 本 指定 伸缩 项 目的 显示 顺序 的 取 值 比较 如 表 10.7 所 示 。 


表 10.7 比较 显示 顺序 


规范 版 本 属性 名 称 属性 值 

新 版 本 ( 标准 版 ) order <number> 
混合 版 flex-order <number> 
老 版 本 box-ordinal-group <integer> 

8. 伸缩 性 

不 同 Flexbox 版 本 指定 伸缩 项 目 如 何 伸缩 尺寸 比较 如 表 10.8 所 示 。 

表 10.8 比较 伸缩 性 
规范 版 本 属性 值 

新 版 本 ( 标准 版 ) none | [ <flex-grow> < flex-shrink'>? || <'flex-basis'>] 
混合 版 none | [ [ <pos-flex> <neg-flex>? ] || <preferred-size> ] 
老 版 本 <number> 


flex 属性 在 微软 公司 的 草案 与 新 标准 或 多 或 少 不 一 样 ， 主 要 区 别 在 于 : 它们 都 转换 成 标准 缩写 版 本 , 属 | 
性 值 为 flex-grow 、flex-shrink 和 flex-basis， 值 使 用 相同 的 方式 在 速记 。 然 而 ，flex-shrink ( 以 前 称 为 负 flex ) | 
的 默认 值 为 1。 这 意味 着 伸缩 项 目 默认 不 能 收缩 。 以 前 ， 空 间 不 足 使 用 flex-shrink 比例 来 伸缩 项 目 ， 但 现在 | 
可 以 在 flex-basis 的 基础 上 配合 flex-shrink 来 伸缩 项 目 


9. 伸缩 流 


不 同 Flexbox 版 本 指定 伸缩 容器 主轴 的 伸缩 流 方向 比较 如 表 10.9 所 示 。 


表 10.9 比较 伸缩 流 


Horizontal 


Reversed horizontal 


Vertical 


Reversed vertical 


新 版 本 (标准 版 ) | flex-direction 


TOW-IeVerse 


column 


column-reverse 


混合 版 | flex-direction 


TOW-IeVerse 


column 


column-reverse 


box-orient 
老 版 本 


box-direction 


在 旧版 本 规范 中 ， 使 用 box-direction 属性 设置 为 reverse 和 在 新 版 本 中 设置 row-reverse 或 column-reverse | 


horizontal horizontal 


normal Teverse 


vertical 
normal 


vertical 


TeVerse 


得 到 的 效果 相同 。 如 果 想 要 的 效果 是 row 或 column， 可 以 省 略 不 设置 ， 因 为 normal 是 默认 的 初始 值 。 


当 设 置 direction 为 reverse， 


“2 


主轴 就 翻转 。 例 如 ， 当 使 用 “lt” 书 写 模式 ， 指 定 row-reverse 时 ， 所 有 伸 


ee xie 和 mv 开 发 从 和 m 到 类 首 ( 微 课 精 编 版 ) 


| 人 天 目 会 从 右 向 左 排 列 。 类 似 地 , column-reverse 将 会 使 所 有 伸缩 项 目 从 下 向 上 排列 ， 来 代替 从 上 往 下 排列 。 
在 老 版 本 中 ， 需 要 使 用 box-orient 来 设置 书写 模式 的 方向 。 当 使 用 “ltr” 模 式 时 ，horizontal 可 用 在 
| inline-axis，vertical 可 用 在 block-axis。 如 果 使 用 的 是 一 个 自 上 而 下 的 书写 模式 ， 如 东亚 传统 的 书写 模式 ， 

| 这 些 值 就 会 翻转 。 


Note 时 


不 同 Flexbox 版 本 指定 伸缩 项 目 是 否 沿 着 侧 轴 排列 比较 如 表 10.10 所 示 。 
表 10.10 ”比较 换行 


规范 版 本 
新 版 本 ( 标准 版 ) 
混合 版 


属性 名 称 No wrapping Wrapping Reversed wrap 


| flex-wrap nowrap wrap | wrap-reverse 


a nowrap 


ie | 


wrap-reverse 让 伸缩 项 目 在 侧 轴 上 进行 start 和 end 翻转 ， 所 以 ， 如 果 伸 缩 项 目 在 水 平 排列 ， 伸 缩 项 目 翻 
转 不 会 到 一 个 新 的 线 下 面 ， 它 会 翻转 到 一 个 新 的 线 上 面 。 简 单 理解 就 是 伸缩 项 目 只 是 上 下 或 前 后 翻转 顺序 。 


wrap-reverse 


10.5 案例 实战 


下 面 我 们 通过 多 个 案例 演示 弹性 布局 的 不 同 应 用 样式 。 


10.5.1 将 固 宽 页 转换 为 弹性 页 


传统 网 页 多 以 固定 像素 来 进行 设计 ， 本 节 示 例 演示 如 何 把 一 个 固定 宽度 为 960 像素 的 模板 页 转换 为 弹 
性 页 面 。 其 中 页 头 和 页 脚 都 是 与 屏幕 一 样 宽 的 ， 左 侧 边栏 宽度 是 200 像素 ， 右 侧 边栏 宽度 是 100 像素 ， 中 
间 区 块 的 宽度 是 660 像素 。 根 据 下 面 的 公式 进行 设计 。 

结果 ( 弹性 宽度 ) = 目标 (栏目 固定 宽度 )/ 上 下 文 (页 面 宽度 ) 


左边 栏 宽 度 为 200 像素 ( 目标 )， 用 960 像素 ( 上 下 文 ) 来 除 ， 结 果 是 0.208333333 ， 把 小 数 点 向 右 移 
两 位 ， 于 是 得 到 了 20.8333333%。 这 个 比例 就 是 200 像素 占 960 像素 的 比例 。 

同 理 ， 中 间 区 域 宽度 : 660 ( 目标 ) 除 以 960 ( 上 下 文 )， 得 到 0.6875， 人 小数 点 向 右 移 两 位 再 加 上 百 分 号 
就 是 68.75%; 右边 栏 : 100 (目标 ) 除 以 960 ( 上 下 文 ) 得 到 0.104166667， 小 数 点 右 移 两 位 加 百 分 号 得 到 
10.4166667%6。 

计算 出 每 列 的 弹性 宽度 后 ， 下 面 来 编写 具体 代码 。 

第 1 步 , 设计 一 个 3 行 3 列 的 模板 结构 。 

<div class="Wrap"> 

<div class="Header">[ 标题 栏 ]</div> 
<div class="WrapMiddle"> 

| <div class="Left">[ 左 栏 ]</div> 

| <div class="Middle">[ 主 栏 ]</div> 


“280 。 


第 10 章 设计 辞 性 市 局 


<div class="Right">[ 右 栏 ]</div> 
</div> 
<div class="Footer">[ 页 脚 栏 ]</div> 
</div> 


第 2 步 , 设计 如 下 CSS 样式 表 , 设计 弹性 布局 版 式 。 


html, body { margin: 0: padding: 0: } /* 清除 页 边 距 */ 
.Wrap { /* 限制 页 面 最 大 宽度 ， 并 居中 显示 */ 
max-width: 1400px: 
margin: 0 auto; 


} 
.Header { /* 标题 栏 样式 ， 满 宽 、 固 高 #/ 
width: 100%; height: 130px: 
background-color: #038C5A: 
} 
.WrapMiddle { width: 100%; font-size: 0; } /* 中 间 栏 包含 框 样式 */ 
Left { /* 左 栏 弹性 宽度 ， 行 内 块 显示 */ 
height: 625px; width: 20.8333333%; 
background-color: #03A66A: display: inline-block: 


height: 625px:; width: 68.75%:; 
background-color: #bbbf90:; display: inline-block: 


} 

-Right { /* 右 栏 弹性 宽度 ， 行 内 块 显示 */ 
height: 625px; width: 10.4166667%; 
background-color: #03A66A: display: inline-block: 


| 
| 
| 
| 
} | 
.Middle { /* 主 栏 弹性 宽度 ， 行 内 块 显示 */ | 
| 
| 
| 
| 


| 
} 
.Footer { /* 页 脚 栏 样式 ， 满 宽 、 固 高 */ | 
height: 200px: width: 100%: | 
background-color: #025059: | 

} | 
| 


第 3 步 ,保存 文档 之 后 ， 在 浏览 器 中 所 看 到 的 效果 如 图 10.20 所 示 。 然 后 ， 改 变 窗口 大 小 ， 就 会 发 现 中 | 
间 区 块 会 一 直 与 左右 边栏 成 比例 缩放 。 当 然 ， 也 可 以 修改 这 里 .Wrap 元 素 的 max-width 值 ( 这 里 是 1400 像 | 
素 )， 大 一 点 或 小 一 点 都 可 以 试 一 下 。 | 


图 10.20 ”把 固 宽 页 转换 为 弹性 页 面 | 
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| 

| 

| 

| 第 4 步 ， 把 当前 文档 index.html 另存 为 index1.html， 再 来 设计 在 较 小 的 屏幕 上 的 页 面 布 局 效果 。 

”对 于 小 屏幕 ， 核 心思 想 就 是 把 内 容量 示 在 一 列 里 。 此 时 隐藏 左 栏 ， 作 为 “ 夯 外 元 素 ” 存 在 ， 通 常用 于 
A | 保存 菜单 导航 之 类 的 内 容 ， 只 有 当 用 户 点 击 时 才 会 滑 入 屏幕 。 主 栏 位 于 页 头 下 方 ， 而 右 栏 又 在 主 栏 下 方 ， 

| 最 后 是 页 脚 区 ， 效 果 如 图 10.21 所 示 。 


< EECED ET 


Note SE ET 


窄 屏 下 显示 效果 点 击 标题 栏 后 滑 出 左 栏 
图 10.21 设计 小 屏幕 下 弹性 布局 效果 


| 第 5 步 ， 这 里 没有 列 出 全 部 的 CSS 代码 ， 全 部 代码 可 以 参考 本 节 示 例 源 代码 index1.html。 以 下 只 是 针 
| 对 左 栏 重 要 的 CSS 样式 。 


.Left { 
position: absolute: 
left: -200px: 
width: 200px: 
transition: transform .3s: 
} 
@media (min-width: 40rem) { 
Left { 
width: 20.8333333%; 
left: 0: 
position: relative: 


} 
y 


| 首先 ， 在 没有 媒体 查询 介入 的 情况 下 ， 只 是 一 个 小 屏幕 布局 。 然 后 ， 随 着 屏幕 变 大 ， 宽 度 变 成 比例 值 ， 
| 定位 方式 变 成 相对 定位 ，left 值 被 设 为 0。 不 需要 重 写 height、display 或 background-color 属性 ， 因 为 不 需 


| 要 修改 它们 。 


| 这 里 综合 运用 了 两 个 响应 式 Web 设计 的 核心 技术 : 将 固定 大 小 转换 为 比例 大 小 ， 以 及 使 用 媒体 查询 相 
| 对 于 视 口 大 小 应 用 CSS 规则 。 


.注意 : 比例 值 的 小 教 点 后 面 是 否 有 必要 带 那 么 多 数字 。 尽 管 宽度 本 身 最 终 会 被 浏览 器 转 搁 为 像素 ， 但 
| 保留 这 些 位 数 有 助 于 将 来 的 计算 精确 ， 例如， 谋 套 元 素 中 更 精确 的 计算 。 因 此 保留 小 数 点 后 面 
| 的 所 有 位 数 。 
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在 实际 的 项 目 中 要 考虑 JavaScript 不 可 用 的 情况 ， 此 时 也 应 该 保证 用 户 能 看 到 菜单 内 容 。 在 真实 的 开发 
中 ,需要 在 标题 栏 某 处 放 一 个 菜单 按钮 或 图 标 ， 以 便 用 户 触发 边栏 菜单 显示 出 来 ( 这 个 例子 需要 点 击 页 头 | 
区 域 )。 为 了 切换 文档 主体 的 类 ， 本 例 使 用 一 些 JavaScript 代码 。 因 为 这 里 只 是 示例 ， 所 以 使 用 了 点 击 事件 。| 
如 果 是 产品 ， 那 应 该 考虑 触摸 事件 的 一 些 问题 ， 如 去 掉 iOS 设备 存在 的 300ms 的 延迟 。 


10.5.2 ”设计 弹性 菜单 | 


本 节 示 例 设计 一 个 简单 的 导航 菜单 ， 让 它们 水 平一 个 挨 一 个 排列 ,效果 如 图 10.22 所 示 。 


D localhostitesthtml x Ne 


GC |© localhosv/test hml 


图 10.22 ”设计 弹性 菜单 | 
第 1 步 ， 设 计 菜单 结构 ， 代 码 如 下 。 | 
<div class="MenuWrap"> | 
<a hre 伍 "#" class="ListItem"> 首页 </a> | 
<a href="#" class="ListItem"> 关于 我 们 </a> | 
<a href="#" class="ListItem"> 公司 产品 </a> | 

<a href="#" class="LastItemListItem"> 公司 资讯 </a> 


<a hre 伍 "#" class="LastItem"> 联系 我 们 </a> | 
</div> | 


第 2 步 ， 为 包含 框 <div class="MenuWrap"> 启动 弹性 布局 ， 然 后 使 用 margin-left: auto; 定义 最 后 一 个 | 
菜单 项 右 侧 显 示 ， 其 他 各 项 保持 默认 左 对 齐 。 


html, body { margin: 0; padding: 0: } 

.MenuWrap { 
background-color: indigo: 
min-height: 2.75rem: 
display: flex: 
align-items: center: 
padding: 0 lrem: 

} 

.ListItem, .LastItem { 
color: #ebebeb: 
text-decoration: none: 

} 

.ListItem { margin-right: 1rem: } 

.LastItem { margin-left: auto: } 


本 例 没有 使 用 浮动 ( float )， 没 有 行内 块 ( inline-block )， 也 没有 单元 格 (table-cell )。 在 包含 元 素 上 设 | 
置 display: flexbox; 后 ， 其 子 元 素 就 会 变 成 弹性 项 ( flex-item )， 从 而 在 弹性 布局 模型 下 布局 。 这 里 的 核心 属 | 
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| 性 是 margin-left: auto， 它 让 最 后 一 项 用 上 该 侧 所 有 可 用 的 外 边 距 。 

| 第 3 步 ， 设 计 让 所 有 项 反 序 排列 ， 效 果 如 图 10.23 所 示 。 

| 具体 方法 : 给 包含 框 <div class="MenuWrap"> 的 CSS 加 一 行 flex-direction: row-reverse， 把 最 后 一 项 的 
| margin-left: auto 改 成 margin-right: auto。 


D localhost/estihiml x We 
_ C | © localhost/test1.html 


图 10.23 反 转 菜单 项 


| 第 4 步 ,设计 重 直 排列 ， 让 所 有 项 垂直 堆 芋 排列。 在 包含 框 中 使 用 flex-direction: column;， 再 把 自动 外 
| 边 距 属性 删 掉 


.MenuWrap { 
background-color: indigo; 
display: flex: 
flex-direction: column:; 

} 

‘ListItem, .LastItem { 
color: #ebebeb: 
text-decoration: none; 


| } 


| 第 5 步 , 设计 垂直 反 序 ， 让 各 项 重 直 反 序 堆 侠 。 只 要 在 包含 框 中 把 flex-direction: column; 改 成 flex- 
| direction: column-reverse; 就 可 以 了 ， 如 图 10.24 所 示 
| 


DD) localhost/test3 html x Ne 


© | © localhost/test3.html 


图 10.24 设计 垂直 反 序 显示 


痊 提示 : flex-flow 属性 是 flex-direction 和 flex-wrap 的 合体 。 例 如 ，flex-flow: row wrap; 就 是 把 方向 ( flex- 

direction ) 设置 为 行 (Tow )， 把 折 行 ( flex-wrap ) 选项 设置 为 折 行 ( wrap )。 不 过 ， 分 别 设置 两 
| 个 属性 会 更 清楚 一 些 。 另 外 ，flex-wrap 属性 在 最 早 的 Flexbox 实现 中 也 不 存在 ， 如 果 合 起 来 写 ， 
| 在 茶 些 浏览 器 中 可 能 导致 整 条 声明 失效 。 
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10.5.3 设计 多 断 点 弹性 菜单 


本 节 示 例 将 设计 在 不 同 媒体 查询 中 的 不 同 Flexbox 布局 。 顾 名 思 义 ，Flexbox 就 是 可 以 灵活 变化 的 。 现 | 
在 设计 在 罕 视 口中 让 各 项 垂直 堆 登 ， 而 在 空间 允许 的 情况 下 改 成 行 式 布 局 ， 效 果 如 图 10.25 所 示 。 | 


D localhosytesthiml x D localhosinsihinl x NE 


© | © localhostht : © | © localhost/test himl 


(a ) 窄 屏 布局 (b ) 宽屏 布局 
图 10.25 设计 多 断 点 弹性 菜单 


第 1 步 ， 在 上 一 节 示 例 的 基础 上 ， 修 改 样式 表 。 首 先 ， 重 设 基准 样式 ， 定 义 包含 框 以 默认 的 堆 释 方式 | 
排列 各 项 目 | 


.MenuWrap { 
background-color: indigo; 
min-height: 2.75rem; 
display: flex; 
flex-direction: column; 
align-items: center; 
padding: 0 lrem: 


} 
第 2 步 ， 添加 断 点 ,设计 在 大 于 等 于 31.25em 宽度 时 ,包含 框 以 水 平 布局 方式 进行 布局 


@media (min-width: 31.25em) { 
.MenuWrap { flex-direction: row: } 


| 
| 
} | 
第 3 步 ,设计 菜单 项 的 基本 样式 | 
.ListItem, .LastItem { | 
| 
| 
| 
| 
| 


color: #ebebeb: 
text-decoration: none; 


} 
第 4 步 ， 为 菜单 项 添加 断 点 ,设计 在 大 于 等 于 31.25em 宽度 时 ,菜单 各 项 右 侧 添加 lrem 的 间距 ， 同 时 | 


设置 最 后 一 项 左 侧 自动 填充 空白 。 | 
@media (min-width: 31.25em) { | 
-ListItem { margin-right: lrem:; } | 

-LastItem { margin-left: auto: } | 
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| 
| 
| 
| 10.5.4 ”设计 粘 附 页 脚 栏 
| 

| 在 网 页 设计 中 ， 经 常会 遇 到 页 面 内 容 不 够 长 ， 页 脚 会 随 内 容 上 下 移动 的 情况 ， 如 果 想 让 页 脚 停留 在 视 
AIT 底部 ， 可 以 使 用 CSS 定位 技术 来 实现 ， 但 是 定位 页 脚 之 后 ， 当 内 容 很 长 时 ， 它 又 会 覆盖 内 容 ， 而 不 是 随 
Note | 内 容 向 下 移动 。 

| 本 例 使 用 弹性 布局 ， 设 计 在 内 容 不 够 多 时 ， 页 脚 一 直 驻 留 底部 ; 而 在 内 容 够 多 时 ， 页 脚 会 位 于 内 容 下 

| 方 ， 效 果 如 图 10.26 所 示 。 


Dlocalbosiesthil x 


| 
| 

| 

| D localbostfestihiml x 
| € 3 GO locahost/testhiml 

| 

上 

| 

| 


€ 3 © [© localhosthestl.html 
[ 广 体内 容 区 域 ] 


(a ) 内 容 不 够 长 时 (b ) 内 容 够 长 时 
图 10.26 设计 粘 附 页 脚 栏 
示例 主要 代码 如 下 。 
<style> 
html, body { 
margin: 0; 
padding: 0: 


} 
html { height: 10096: } 
body { 
display: flex: 
flex-direction: column; 
min-height: 100%: 
text-align: center: 
} 
.MainContent { flex: 1: } 
.Footer { 
background-color: violet: 
padding: .Srem: 
} 
</style> 
<div class="MainContent">[ 主体 内 容 区 域 ]</div> 
<div class="Footer">[ 版 权 信息 区 域 ]</div> 


本 示例 设计 原理 是 flex 属性 会 让 内 容 在 空间 允许 的 情况 下 伸展 。 因 为 页 面 主体 是 伸缩 容器 ， 最 小 高 度 
| 是 100%， 所 以 主 内 容 区 会 尽 可 能 占据 所 有 有 效 空间 。 当 然 内 容 够 长 时 ， 会 把 页 脚 区 域 向 下 挤 到 视图 外 面 ， 
| 而 当 内 容 不 够 长 时 ， 会 把 页 脚 区 域 向 下 挤 到 视图 底部 。 
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10.5.5 设计 3 栏 页 面 


本 节 示 例 根 据 上 节 介 绍 的 方法 ， 使 用 不 同 版 本 语法 ， 设 计 一 个 兼容 不 同 设备 和 浏览 器 的 
弹性 页 面 ， 演 示 效 果 如 图 10.27 所 示 。 具 体操 作 步 骤 请 扫 码 学 习 。 


国外 
线 上 阅读 


水 调 歌 头 -明月 几时 有 
其 轼 


和 
了 
RE eH 


,BE 入 
nt 2 二 有 


图 10.27 定义 混合 伸缩 盒 布局 


10.5.6 设计 3 行 3 列 应 用 


本 节 示 例 借助 Flexbox 布局 ， 设 计 页 面 呈 现 3 行 3 列 布局 样式 ， 同 时 能 够 根据 窗口 自 适应 调整 各 自 空 | 
间 ， 以 满 屏 显示 ， 效 果 如 图 10.28 所 示 。 具 体 代码 解析 请 扫 码 学 习 。 


Article 


Footer 


图 10.28 HTMLS 应 用 文档 


10.6 在线 练习 


本 节 将 通过 大 量 的 上 机 示例 ， 练 习 使 用 CSS3 弹性 布局 特性 设计 自 适应 网 页 版 式 ， 
的 能 力 。 
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设计 响应 式 图 片 


自从 响应 式 设 计 的 概念 问世 后 ， 如 何 定义 响应 式 图 片 就 一 直 备 受 关 注 ， 其 核心 是 
如 何 只 写 一 遍 代 码 ， 就 能 够 让 图 片 适用 所 有 设备 ， 能 够 根据 用 户 的 设备 和 使 用 场景 为 济 
览 器 提供 合适 的 图 片 。 本 章 将 详细 讲解 HIMLS 新 增 的 picture 元 素 ， 以 及 与 媒体 查询 配 
合 使 用 的 相关 方法 。 


【学 习 重 点 】 

证 认识 响应 式 图 片 。 

WI 正确 使 用 Picture 元 素 。 

I 能 够 在 实践 中 具体 应 用 响应 式 图 片 。 
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11.1 认识 响应 式 图 片 


随 着 移动 Web 的 流行 ， 设 计 固 定 宽度 、 像 素 完美 的 网 站 已 经 不 再 适应 时 代 的 需求 。 在 宽屏 显示 器 、 互 若 了 本 
联网 电视 、 多 尺寸 的 平板 电脑 和 智能 手机 的 复杂 环境 下 ， 我 们 必须 设计 适应 不 同 宽度 的 网 页 ， 从 320 像素 | 
到 7680 像素 。 | 
伴随 这 种 多 分 辩 率 设备 的 同时 出 现 ， 用 户 可 以 拉 伸 或 收缩 图 像 ， 以 适应 这 些 不 同 的 要 求 。 目前 最 常见 | 
的 解决 方案 ， 就 是 使 用 如 下 CSS 样式 ， 以 适 配 不 同 终端 机 型 的 屏幕 宽度 和 像素 密度 。 | 
| 
img{ | 
max-width: 100%; | 
height: auto; | 
| 

| 


使 用 max-width: 100% 以 确保 图 像 永 远 不 会 超越 其 父 容器 的 宽度 。 如 果 父 容器 的 宽度 收缩 小 于 图 像 的 
宽度 ， 图 像 将 随 之 缩小 。 height: auto 可 以 确保 图 片 的 宽度 发 生 改 变 时 ， 图 片 的 高 度 会 依据 自身 的 宽 高 比例 | 
进行 缩放 。 

这 样 当 我 们 在 移动 设备 上 访问 响应 式 网 页 里 的 图 片 时 ， 只 是 把 图 片 的 分 辩 率 做 了 缩放 ， 下 载 的 还 是 计 | 
算 机 端的 那 张 大 图 ， 这 样 不 仅 浪 费 流量 ， 而 且 会 拖 慢 网 页 的 打开 速度 ， 严重 影响 用 户 的 使 用 体验 。 | 

开发 者 不 可 能 知道 或 预见 浏览 网 站 的 所 有 设备 ， 只 有 浏览 器 在 打开 和 泻 染 内 容 时 才 会 知道 使 用 它 的 设 | 
备 的 具体 情况 ( 屏幕 大 小 、 设 备 能 力 等 )。 另 一 方面 ， 只 有 开发 者 知道 有 几 种 大 小 的 图 片 。 例 如 ， 我 们 有 同 | 
一 图 片 的 3 个 版 本 ， 分 别 是 小 、 中 、 大 ， 分 别 对 应 于 相应 的 屏幕 大 小 和 分 辩 率 。 浏 览 器 不 知道 这 些 ， 因 此 | 
我 们 得 想 办 法 让 它 知道 。 | 

总 之 ， 难 点 在 于 我 们 知道 自己 有 什么 图 片 ， 浏 览 器 知道 用 户 使 用 什么 设备 访问 网 站 以 及 最 合适 的 图 片 | 
大 小 和 分 辨 率 是 多 少 ， 两 个 关键 因素 无 法 融合 。 | 

怎么 才能 告诉 浏览 器 我 们 准备 了 哪些 图 片 ， 让 它 视 情况 去 选择 最 合适 的 呢 ? 

响应 式 设计 刚刚 出 现 的 几 年 里 ， 并 没有 固定 的 方法 。 今 天 ,我 们 有 了 Embedded Content 规范 : https: /| 
html.spec.whatwg.org/multipage/embedded-content.html, 

Embedded Content 规范 描述 了 如 何 进行 简单 的 图 片 分 辩 率 切换 ， 让 拥有 高 分辩 素 屏 莫 的 用 户 看 到 高 分 | 
辨 率 的 图 片 ， 以 及 可 以 根据 视 口 空 间 大 小 显示 完全 不 同 的 图 片 ( 类 似 媒体 查询 )。 


i 


从 提示 : 响应 式 图 片 讨论 组 ( http: //responsiveimages.org/ ) 定义 了 多 种 使 用 情况 (http: /usecasesTesponsiveimages. 
org/ )。 建 议 大 家 去 阅读 完整 的 使 用 情况 列表 ， 里 面 有 很 多 有 价值 的 建议 。 


11.2 使 用 picture 


ee 一 个 元 素 ， 它 可 以 根据 不 同 的 条 件 加 载 不 同 的 图 像 ， 这 些 条 件 可 以 是 当前 6 视 | 
高 度 ( height )、 宽 度 ( width )、 方 向 (orientation )、 像 素 密度 ( dpr ) 等 。 
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| 
| 11.2.1 基本 用 法 


| 
| 在 没有 引入 JavaScript 第 三 方 插件 ， 或 者 CSS 中 没有 包含 媒体 查询 的 情况 下 ，picture 元 素 是 比较 理想 
| 的 方案 : 实现 只 用 HTML 来 声明 响应 式 图 片 。 该 方案 的 优势 如 下 。 
Note | 回 “加载 适当 大 小 的 图 像 文 件 ， 使 可 用 带宽 得 到 充分 利用 。 
| 回 “加载 不 同 剪裁 ， 并 具有 不 同 横 纵 比 的 图 像 ， 以 适应 不 同 宽度 的 布局 变化 。 
| 回 ”加载 更 高 的 像素 密度 ， 显 示 更 高 分 辩 率 的 图 像 。 
| 具体 方法 如 下 。 
| 第 1 步 ， 创 建 <picture> 标签 。 
| 
| 
| 


第 2 步 ， 在 该 标签 内 创建 一 个 或 多 个 用 来 执行 指定 特性 的 <source> 子 标签 。 

第 3 步 ， 为 <source> 子 标签 添加 media 属性 ， 用 来 定义 具体 特性 ， 如 宽度 ( max-width 、min-width )、 
| 方向 (orientation ) 等 。 
第 4 步 ， 为 <source> 子 标签 添加 srcset 属性 ， 属 性 值 为 相应 的 图 像 文 件 名 称 ， 以 便 进 行 加 载 。 如 果 想 
| 提供 不 同 的 像素 密度 ， 如 针对 Retina 显示 屏 ， 可 以 添加 额外 的 文件 名 到 srcset 属性 中 。 
| 第 5 步 , 最 后 ， 在 <picture> 标签 尾部 添加 一 个 回 退 的 <img> 标签 ， 用 来 兼容 不 支持 <picture> 标签 的 
| 浏览 器 。 
| picture 元 素 没有 属性 ， 仅 被 用 来 当 作 source 元 素 的 容器 。source 元 素 用 来 加 载 多 媒体 源 ， 如 视频 和 音 
| 频 ， 它 包含 如 下 新 的 属性 。 
回 srcset( 必需 ) 
接受 单一 的 图 片 文 件 路 径 ， 如 sreset=" img/minpic.png"; 或 者 是 逗号 分 隔 的 用 像素 密度 描述 的 图 片 路 径 ， 
| 如 srcset=" img/minpic.png, img/minpic retina.png 2x"。 

回 media( 可 选 ) 
| 接受 任何 验证 的 媒体 查询 ， 如 media="( min-width: 320px )"。 
| 回 sizes ( 可 选 ) 
| 接受 单一 的 宽度 描述 ， 如 sizes="100vw"; 或 者 单一 的 媒体 查询 宽度 描述 ， 如 sizes=" ( min-width: 
| 320px ) 100vw"; 或 者 逗号 分 隔 的 媒体 查询 对 宽度 的 描述 ， 如 sizes=" ( min-width: 320px ) 100vw，( min- 
| width: 640px )50vw，eale ( 33vw - 100px )"。 
”加 type( 可 选 ) 
接受 支持 的 MIME 类 型 ， 如 type="image/webp" or type="image/vnd.ms-photo"。 
| 
| 


浏览 器 根据 source 元 素 标签 的 列表 顺序 ， 使 用 第 一 个 合适 的 source 元 素 ， 并 根据 这 些 设置 属性 ， 加 载 
| 确切 的 图 片 资源 ， 同 时 忽略 掉 后 面 的 source 元 素 。 


11.2.2 浏览 器 支持 


| 
”目前 Chrome、Firefox、Opera 浏览 器 对 其 兼容 性 较 好 ， 具 体 细节 可 以 访问 http: /eaniuse comy/ 进行 查 
| 询 。 如 果 要 兼容 早期 版 本 浏览 器 ， 可 以 使 用 Picturefill 插件 。 

回 官网 地 址 : http: //scottjehl.github.io/picturefill/。 

| 加 下 载 地 址 : http: //www.bootcdn.cn/picturefill/。 

| 在 文档 头 部 导入 如 下 插件 文件 。 
| 
| 


‘<script src="picturefill.js"></script> 
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件 ， 除 了 少数 限制 ， 


Picturefill 在 其 他 的 正版 本 中 都 可 以 正常 工作 , 但 是 正 9 却 不 能 识别 被 包 庄 在 picture 元 素 中 的 source | 
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户 也 可 以 通过 异步 加 载 脚本 的 方式 以 增加 效率 ， 具 体 说 明 可 以 参考 Picturefill 的 文档 。 有 了 这 个 


picture 元 素 将 正常 运行 。 


元 素 。 为 了 解决 这 个 问题 ， 可 以 使 用 video 元 素 包 住 source 元 素 ， 这 就 会 使 它们 在 正 9 中 被 识别 ， 例 如 : 


<picture> 
<!--[if IE 9]><video style="display: none: "><![endif]--> 
<source srcset="smaller.jpg" media="(max-width: 768px)"> 
<source srcset="default.jpg"> 
<!--[if IE 9]></video><![endif]--> 
<img srcset="default.jpg" alt="My default image"> 
</picture> 


另外 ，Android 2.3 也 识别 不 了 在 picture 元 素 中 的 source 元 素 。 然 而 ， 在 使 用 常规 的 img 元 素 时 ， 
就 可 以 识别 srcset 属性 。 为 了 避免 在 Android 2.3 及 任何 有 相同 问题 的 其 他 浏览 器 中 出 现 此 问题 ， 要 确保 在 


srcset 属性 


存在 默认 用 于 回 退 的 img 元 素 的 文件 名 。 


省 


有 了 这 个 基于 JavaScript 的 解决 方案 ， 那 么 在 浏览 器 中 就 需要 支持 JavaScript。Picturefill 2.0 不 提供 “no-js” | 


的 解决 方法 ， 因 为 当 原生 浏览 器 支持 picture 元 素 时 ， 将 会 


下 ， 则 可 以 选择 使 用 Picturefill 1.2。 


了 Picturefill 3 


有 现代 浏览 器 都 支持 媒体 特性 ， 正 8 以 及 更 低 版 本 的 浏览 器 是 剩 下 的 唯一 不 支持 的 。 


11.2.3 ”应 用 示例 


如 果 picture 与 audio 、video 等 元 素 协 同 合作 将 增强 响应 


source 元 素 ， 以 指定 不 同 的 图 像 文件 名 ,根据 不 同 的 条 件 进行 加 载 。 
【示例 1】 下 面 的 示例 设计 了 针对 不 同 屏幕 宽度 加 载 不 同 的 图 片 ; 当 页 面 宽度 在 320 像素 ~640 Ca 


载 minpic.png; 


<picture> 
<source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png"> 
<source media="(min-width: 640px)" srcset="img/middle.png"> 
<img src="img/picture.png" alt="this is a picture"> 

</picture> 


【示例 2】 下 面 的 示例 中 添加 了 屏幕 的 方向 作为 条 件 ， 当 屏幕 为 横 屏 方向 时 加 载 以 _landscape.png 结 


的 图 片 ; 当 


当 页 面 宽度 大 于 640 像素 时 加 载 middle.png。 


屏幕 为 竖 


<picture> 


<source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)”srcset= "img/minpic landscapepng'> 


屏 方向 时 加 载 以 _portraitpng 结尾 的 图 片 。 


<source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png"> 
<source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png"> 
<source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png"> 
<img src="img/picture.png" alt="this is a picture"> 

</picture> 


【示例 3】 下 面 的 示例 中 添加 了 屏幕 像素 密度 作为 条 件 。 当 像素 密度 为 2x 时 ， 加 载 retina png 的 图 片 ， 
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另外 一 个 要 求 就 是 需要 本 地 媒体 特性 的 支持 ， 从 而 使 media 属性 中 的 特性 能 够 正常 工作 。 所 


3 


出 现 多 个 图 像 。 如 果 必须 在 Tavaseript 禁 用 状态 | | 


应 式 图 片 工 作 的 进程 ， 它 允许 企划 多 个 | 


[xie 和 uv 开 疏失 和 m 到 类 首 ( 微 课 精 编 版 ) 


当 像素 密度 为 1x 时 ， 加 载 无 retina 后 缀 的 图 片 。 


<picture> 
<source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png. img/minpic Tetinapng 2x"> 
<source media="(min-width: 640px)" srcset="img/middle.png, img/middle retina.png 2x"> 
<img src="img/picture.png, img/picture_retina.png 2x" alt="this is a picture"> 

</picture> 


【示例 4】 下面 的 示例 中 添加 了 图 片 文件 格式 作为 条 件 。 当 支持 webp 格式 的 图 片 时 ， 加 载 webp 格式 图 


， 当 不 支持 时 ， 加 载 png 格式 的 图 片 。 


<picture> 
<source type="image/webp" srcset="img/picture.webp"> 
<img src="img/picture.png" alt="this is a picture"> 
</picture> 


【示例 5】 下面 的 示例 中 添加 了 宽度 描述 。 设 计 页 面 会 根据 当前 尺寸 选择 加 载 不 大 于 当前 宽度 的 最 大 的 


<img src="picture-160.png" alt="this is a picture" 

Sizes="90vw" 

STcset="picture-160.png 160w, 
Picture-320.png 320w, 
Picture-640.png 640wW. 
picture-1280.png 1280w"> 


【示例 6] 在 下 面 示例 中 添加 了 sizes 属性 。 当 窗口 宽度 大 于 等 于 800px 时 ， 加 载 对 应 版 本 的 图 片 。 


<source media="(min-width: 800px)" 
sizes="90vw" 
srcset="picture-landscape-640.png 640w. 
Picture-landscape-1280.png 1280w. 
picture-landscape-2560.png 2560w"> 
<img src="picture-160.png" alt="this is a picture" 
sizes="90vw" 
srcset="picture-160.png 160w. 
Picture-320.png 320w. 
Picture-640.png 640w. 
Picture-1280.png 1280w"> 


11.3 案例 实战 


下 面 将 结合 具体 案例 深入 讲解 响应 式 图 片 的 实战 应 用 。 


11.3.1 图 片 加 载 


本 节 示 例 中 ,我 们 将 使 用 picture 元 素 设 计 在 不 同 视图 下 加 载 不 同 的 图 片 ， 演 示 效 果 如 图 11.1 所 示 。 
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| 
(a) 小 屏 (b ) 中 屏 (c) 大 屏 | 
图 11.1 加 载 多 个 图 片 | 
示例 源 代码 如 下 。 
<IDOCTYPE html> | 
<html> 
<head> 


<meta charset="utf-8"> 

‘<script src="images/picturefill.js" type="text/javascript"></script> 

</head> 

<body> 

<picture> 
<source media="(min-width: 650px)" srcset="images/kitten-large.png"> 
<source media="(min-width: 465px)" srcset="images/kitten-medium.png"> 
<! 一 img 元 素 用 于 不 支持 picture 元 素 的 浏览 器 --> 


<img srTc="images/kitten-smallpng" alt="a cute kitten" id="picimg"> 


11.3.2 ”针对 不 同 设备 调整 显示 焦点 


在 传统 设计 中 ， 针 对 不 同 的 设备 常常 通过 CSS 调整 图 片 的 大 小 ， 以 适应 不 同 设备 的 显示 。 但 是 这 种 方 | 
法 存在 一 个 问题 : 在 小 设备 中 ， 图 片 由 于 被 压缩 得 很 小 ， 图 片 焦点 信息 无 法 准确 传递 。 本 节 示 例 设计 在 计算 | 
机 端 浏览 器 中 显示 大 图 广告 ， 而 当 在 移动 设备 中 预览 时 ， 仅 显示 广告 图 中 的 焦点 信息 ， 效 果 如 图 11.2 所 示 。 | 


聚 划算 


气质 春装 新 品 


总 有 一 件 适合 你 


总 有 一 件 适合 你 


(a ) 桌面 屏幕 (b ) 移动 设备 中 | 
图 11.2 针对 不 同 设备 显示 不 同 焦点 图 | 
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a {7pcs 各 动 Wt 古 家 从 入 站 到 精 胡 ( 艇 久 糙 纺 上) 


| 
| 
| 示例 源 代码 如 下 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<script src="images/picturefill.js" type="text/javascript"></script> 

| </head> 

| <body> 

| <picture> 

| <source srcset="images/big.jpg" media="(min-width: 800px)"> 
| <img srcset="images/small.jpg"> </picture> 
| 

| 

| 


</body> 
</html> 


“11.3.3 ”使 用 媒体 查询 调整 显示 焦点 
| 
| 针对 上 节 的 示例 ， 本 节 示 例 巧 用 媒体 查询 ， 根 据 屏 幕 宽度 的 不 同 ， 显 示 不 同 大 小 的 响应 式 图 片 。 首 先 ， 
| 编写 HIML 代码 ,设计 广告 框 <div class="changeImg">; 然后 ， 引 入 CSS 的 样式 类 changeImg， 便 于 使 用 媒 
| 体 查询 技术 ; 接着 ， 在 CSS 代码 中 利用 media 关键 字 ， 当 屏幕 宽度 大 于 等 于 641 像素 时 ， 显 示 bigjpg 图 片 ; 
| 当 屏幕 宽度 小 于 641 像素 时 ， 显 示 smalljpg 图 片 。 
示例 源 代码 如 下 
| <!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style> 
久 当 屏幕 宽度 大 于 641 像素 时 */ 
@media screen and (min-width: 641px) { 
.changeImg { 
background-image: url(images/big.jpg): 
background-repeat: no-repeat: 
height: 440px: 
} 


入 当 屏幕 宽度 小 于 641 像素 时 */ 
@media screen and (max-width: 640px) { 
.changeImg { 
background-image: url(images/small.jpe): 
background-repeat: no-repeat: 
height: 440px: 
} 
' 
</style> 
</head> 
| <body> 
| <div class="changeImg"></div> 
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</body> 


11.3.4 ”图 片 分 辩 率 处 理 


【示例 1 假设 一 张 图 片 有 3 种 分 辩 率 的 版 本 ， 小 的 图 片 针对 小 屏幕 ， 中 等 的 图 片 针 对 中 等 屏幕 ， | 
比较 大 的 图 片 针 对 所 有 其 他 屏幕 。 下 面 的 代码 可 以 让 浏览 器 知道 这 3 个 版 本 。 
<img src="pic_smalljpg" 
srcset=" pic_medium.jpg 1.5x, 
Pic large.jpg 2x" > 


这 是 实现 响应 式 图 片 最 简单 的 语法 。 首 先 ，src 属性 在 这 里 有 两 个 角色 : 一 是 指定 1 倍 大 小 的 小 图 片 ， 


二 是 在 不 支持 srcset 属性 的 浏览 器 中 用 作 后 备 。 正 因为 如 此 ， 才 给 它 指定 了 最 小 的 图 片 ， 好 让 旧版 本 的 浏览 


器 以 最 快 的 速度 取得 它 。 

对 于 支持 srcset 属性 的 浏览 器 ， 通 过 逗号 分 隔 的 图 片 描述 ， 让 浏览 器 自己 决定 选择 哪 一 个 。 图 片 描述 首 
先是 图 片 名 (如 pic_medium.jpg )， 然 后 是 一 个 分 辩 率 说 明 。 上 面 的 示例 的 代码 是 1.5x 和 2x， 其 中 的 数字 可 
以 是 任意 整数 ， 如 3x 或 4x 都 可 以 ， 如 果 有 可 能 使 用 那么 高 分 辩 率 的 屏幕 的 话 。 

【示例 2】 设 计 srcset 和 sizes 联合 切换 。 

在 响应 式 设计 中 ， 经 常 可 以 看 到 在 小 屏幕 中 可 以 全 屏 显 示 ， 而 在 大 屏幕 上 只 显示 一 半 宽 的 图 片 。 


<img srcset="pic-small.jpg 450w, pic-medium.jpg 900w" 
sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmallLjpg" > 


这 里 使 用 了 srcset 属性 。 不 过 ， 本 例 在 指定 图 片 描述 时 ， 添 加 了 以 w 为 后 缀 的 值 。 这 个 值 的 意思 是 告 
诉 浏览 器 图 片 有 多 宽 。 这 里 表示 图 片 分 别 是 450 像素 宽 ( pic-smalljpg ) 和 900 像素 宽 ( pic-medium.jpg )。 
但 这 里 以 w 为 后 缀 的 值 并 不 是 “真实 ”大 小 ， 它 只 是 对 浏览 器 的 一 个 提示 ， 大 致 等 于 图 片 的 “CSS 像素 ” 
大 小 。 


央 提示 : 使 用 w 后 缓 的 值 对 引入 sizes 属性 非常 重要 。 通 过 后 者 可 以 把 意图 传达 给 浏览 器 。 在 上 面 的 示 
例 中 ， 我 们 用 第 一 个 值 告诉 浏览 器 “在 最 小 宽度 为 17em 的 设备 中 ， 想 让 图 片 显示 的 宽度 约 为 
100vw”。 
sizes 属性 的 第 二 个 值 告诉 浏览 器 设备 宽度 大 于 等 于 40em， 让 对 应 的 图 片 显示 为 50vw 宽 。 我 们 
用 DPI (或 DPR， 即 Device Pixel Ratio， 设 备 像素 比 ) 来 解释 就 明白 了 。 例 如 ， 如 果 设 备 宽度 
是 320 像素, 而 分 辨 率 为 2x ( 实际 宽度 是 640 像素 )， 那 浏览 器 可 能 会 选择 900 像素 宽 的 图 片 ， 
因为 对 当前 屏幕 宽度 而 言 ， 它 是 第 一 个 符合 要 求 的 足够 大 的 图 片 。 


11.3.5 ”设计 图 文 版 式 


本 节 示 例 模 拟 携程 旅行 网 的 最 佳 旅游 景区 网 页 ， 效 果 如 图 11.3 所 示 。 整 个 页 面 主体 为 上 、 下 结构 。 顶 


部 内 容 为 标题 图 片 ， 底 部 内 容 为 最 佳 旅游 景区 的 图 片 和 景区 简介 。 项 部 结构 使 用 header 元 素 实现 ， 底 部 结 | 


构 使 用 section 元 素 实 现 。 


0s 


| 


Note 
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沟 内 刀 布 原始 森林 ， 分 布 着 无 数 的 河 湖 ， 飞 动 与 静 座 结 
合 , 变幻 无 穷 ， 美丽 到 让 人 失语 。 


景区 中 的 干 座 石 峰 拔 地 而 起 ， 八 百 条 溪流 迪 风 曲折 ,被 
图 11.3 设计 图 文 版 式 


页 面 基本 框架 代码 如 下 


<header class="header"> </header> 
<section class="Wwrap"> </section> 


下 面 我 们 重点 看 一 下 页 面 正文 部 分 的 图 文 版 式 设计 。 结 构 如 下 


<section class="Wrap"> 
<ul class="pic-list"> 
<li> <a class="jump" data-type="3" data-id="25" data-name=" 九寨 沟 " href=#"> 
<div class="pic-box"> <img src="images/01.jpg" alt=" 九寨 沟 " /> <span class="number cffaa39">1</span> 
<div class="title"> 
<div class="title-name"> 九寨 沟 </div> 
<ul class="score-list"> 
<li class="icon-score-full"></li> 
<li class="icon-score-empty"></li> 
</ul> 
</div> 
</div> 
<div class="sub"> <span> 沟 内 遍布 原始 森林 ， 分 布 着 无 数 的 河 湖 ， 飞 动 与 静 廊 结合， 变幻 无 穷 ， 
美丽 到 让 人 失语 。</span> </div> 


</a> </l> 
<li>……- </l> 
</ul> 
</section> 


主体 图 文 版 式 使 用 <section class="wrap"> 定义 ， 内 部 包含 一 个 列表 结构 <ul class="pic-list">， 每 个 列表 


| 项目 定义 一 个 图 文 小 栏目 。 


在 图 文 栏目 中 ,使 用 <div class="pic-box"> 设计 图 片 显示 ,使 用 <div class="sub"> 设计 文字 说 明 。 在 图 
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片 显 示 框 中 ， 包 含 一 个 标题 文字 和 序号 文字 ， 以 及 装饰 图 标 。 然 后 使 用 CSS 定义 显示 样式 。 具 体 说 明 如 下 。| 
第 1 步 ,设计 图 文 栏目 为 白色 背景 与 页 面 浅 灰色 背景 色 区 分 开 来 。 

.Pic-list li { background-color: #fff margin-bottom: 10px } | 

第 2 步 ,设计 img、span 和 a 元 素 的 基本 样式 。 

.Pic-list img, .pic-list .sub span { display: block: color: #333 } 

.Pic-list a { display: block: color: #333 } 

第 3 步 , 设计 图 片 框 <div class="pic-box"> 相对 定位 ， 这 样 可 以 在 其 内 部 精确 定位 数字 编号 和 图 标 。 


.pic-list .pic-box { position: relative } 


第 4 步 ， 设计 数字 编号 样式 ， 并 固定 在 图 片 左上 角 位 置 。 | 


.pic-list .number { background-color: #ffaa39; color: #fff: font-family: helvetica: font-size: 38px; height: 50px:; width 
SO0px; line-height: 50px; display: block: text-align: center; overflow: hidden: position: absolute; top: 0; left: 0 } 
.pic-list .cffaa39 { background-color: #099fde } 


| 
第 5 步 ， 设 计 图 文 标题 框 绝对 定位 ， 固 定 在 图 片 左下 角 位 置 ， 其 中 包括 标题 文本 和 图 标 。 | 


.pic-list .title { background: -webkit-gradient ( linear, 0 5%. 0 100%. from (transparent ) , to (rgba ( 0. 0. 0, .5 ))); 
width: 100%; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; bottom: 0; 
left: 0; overflow: hidden } 

第 6 步 ,设计 标题 文本 显示 样式 ， 同 时 设计 图 标 样式 。 | 
‘Pic-list .title-name { color: #fff: font-size: 20px; font-weight: 700: line-height: 35px; float: left } | 
‘Pic-list .score-list { margin-top: 10px; padding-left: 7px: overflow: hidden } 

‘Pic-list .score-list li { background-color: transparent margin: 0 1px 0 0; height: 15px; width: 15px: float: left background- ， 
size: 15px: -Webkit-background-size: 15px } | 
.pic-list .Score-list .icon-score-full { background-image: url(../images/icon_score_full.png) } | 
.pic-list .Score-list .icon-score-empty { background-image: url(../images/icon_score_empty.png) } | 

| 
| 
| 
| 


vote 


.pic-list .Score-list .icon-score-half { background-image: url(../images/icon_score_half.png) } 


第 7 步 ， 设 计 图 片 下 面 的 文字 说 明 样式 ， 让 文字 与 图 片上 下 堆 释 布局 。 


.pic-list .sub { border-width: 1px; border-top-width: 0; border-image: url ( .images/icon border halfpng ) 2 stretch; - | 
webkit-border-image: url ( .images/icon border halfpng ) 2 stretch; padding: 10px 11px; box-sizing: border-box; - ， 
webkit-box-sizing: border-box; overflow: hidden } 

‘Pic-list .sub span: nth-child(2) { color: #999: font-size: 11px: text-align: right: position: relative } 


11.3.6 ”设计 热点 景点 栏目 


本 节 示 例 通 过 对 旅游 网 站 的 景点 推荐 网 页 的 设计 ， 重 点 熟悉 HTML5 中 的 图 像 元 素 、CSS 的 背景 设 


置 等 ， 练 习 在 网 页 中 合理 地 插入 图 像 ， 学 会 恰当 应 用 图 片 设计 景点 推荐 网 页 的 方法 。 页 面 效 果 如 图 114 | 


所 示 。 | 
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图 11.4 热点 景点 推荐 网 页 


整个 页 面包 含 3 部 分 : 顶部 为 导航 栏 ， 中 间 为 热点 景区 列表 ， 底 部 为 版 权 信 息 区 域 ， 基 本 框架 代码 如 下 。 


<div class="wrapfix"> 
<nav class="wrapline"> </nav> 
<section class="m-carousel m-fluid m-carousel-photos"> 
<div class="m-carousel-inner"></div> 
<div class="m-carousel-controls m-carousel-bulleted"> </div> 
</section> 
<section> 
<div id="hotlistWrapper"> 
<div class="hotlist"> </div> 
<div class="hot-item"> 
<div class="hotbox"> </div> 
<div class="hotbox"> </div> 
</div> 
</div> 
<div class="show-more"> </div> 
</section> 
<footer class="footer" data-config-type=""></footer> 
</div> 


下 面 结合 主体 结构 简单 说 明 一 下 实例 设计 过 程 。 
第 1 步 , 在 主体 结构 中 ，<nav class="wrapline"> 负责 设计 置顶 导航 条 ， 它 包含 4 个 项 目 : 首页 、 专 辑 、 


| 发 现 、 搜 索 。 在 main.css 样式 表 文件 中 ,通过 下 面 两 个 样式 ,使 用 CSS3 伸缩 盒 布局 让 每 个 项 目 平均 分 布 、 
| 水 平 排列 。 


nav { display: box; display: -webkit-box; box-orient: horizontal; -webkit-box-orient: horizontal; width: 100%; 
background: #9ac969; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; list-style-type: none; margin- 
bottom: Spx } 

nav a { display: inline-block: height: 40px: line-height: 40px: text-align: center: border-radius: 2px: font-weight: bold; 
font-size: 16px: border-left: 1px solid #fff: -webkit-box-flex: 1: -moz-box-flex: 1: box-flex: 1: } 


第 2 步 ，<section class="m-carousel m-fluid m-carousel-photos"> 框 用 来 设计 灯箱 广告 。 其 中 <div class= 
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Wi | 
隐 六 | 
"im-carousel-inner"> 子 框 用 来 包 里 所 有 的 图 文 框 ( <div class-"m-item"> )， 在 图 文 框 中 包 庄 广 告 大 图 和 一 段 | 
说 明文 字 。<div class="m-carousel-controls m-carousel-bulleted"> 子 框 包含 多 个 链接 数字 ， 用 来 显示 切换 导航 
按钮 。 这 些 导航 按钮 以 绝对 定位 的 方式 显示 在 图 的 右 下 角 位 置 ， 如 图 11.5 所 示 。 

-mm-carousel-controls{ position: absolute: right: 10px: bottom: 10px; text-align: center } | 


.Im-carousel-controls a { padding: Spx: -webkit-user-select: none: -moz-user-select: -moz-none; user-select: none; -webkit- 
User-drag: none; -moz-user-drag: -moz-none; user-drag: none } 


图 11.5 设计 焦点 图 


第 3 步 ， 在 <section> 区 域 ， 内 艇 了 一 层 容 器 <div nn 其 中 包含 了 两 组 子 模块 ， 
们 的 结构 相同 ， 都 包含 两 部 分 : 第 一 部 分 是 <div class="hotlist">， 定 义 子 模块 的 标题 ; 第 二 部 分 是 | | 
class="hot-item">， 内 部 又 包含 两 个 图 文 框 <div class="hotbox">， 效果 如 图 11.6 所 示 | 


| 
| 
| 
海岛 浪 滥 行 逐 浪 踩 沙 | 
| 
| 
| 


马尾 岛 自然 之 美 海 陵 岛 那天 的 云 
图 11.6 设计 图 文 框 


第 4 步 ， 在 main.css 样式 表 文件 中 ， 通 过 hot-item 弹性 容器 ， 让 两 个 图 文 框 水 平 显示 。 通 过 .hotbox | 
img 选择 器 ， 为 图 片 加 上 内 补 白 和 圆 角 边框 ,设计 一 种 外 延 线 和 圆 角 特 效 。 | 
.hot-item { width: 100%; display: box: display: -webkit-box: display: -moz-box } | 
.hotbox { padding: 0 8px: text-align: center: -webkit-box-flex: 1: -moz-box-flex: 1 } | 
.hotbox img { border: 1px solid #ccce:; padding: 0.3em: border-radius: Spx } | 
.hotbox p { clear: both: text-align: center: color: #666: height: 21px: line-height: 21px: font-size: 16px: text-overflow: clip: | 
overflow: hidden: white-space: nowrap: padding: 10px 0 } | 
| 
| 


11.3.7 ”设计 图 片 分 享 页 面 


本 节 示 例 模拟 去 哪儿 旅行 网 的 Touch 版 旅 图 网 页 ， 如 图 11.7 所 示 。 主 体 为 上 、 中 、 下 结构 ， 顶 部 内 容 
包括 主页 链接 按钮 、 标 题 文字 、Logo i 中 部 内 容 包 括 多 行 旅行 图 片 ， 底 
部 内 容 包 括 多 个 导航 超 链接 和 版 权 信息 。 顶 部 结构 使 用 header 元 素 实 现 ， 中 部 结构 使 用 article 元 素 实现 ， 
底部 结构 使 用 footer 元 素 实现 。 | 


ss 
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| 4 去 万 儿 旅行 网 首页 WF Gunar.Com 


Samsung Galary Nole 50001280 ppt: 285 [3s] [50% ~ 


图 11.7 设计 旅游 图 片 分 享 页 面 


| 页 面 基 本 框架 代码 如 下 
<header> 

<div class="channel"> </div> 
| <div data-role="header" class="logoheader ui-header ui-bar-a" role="banner"> </div> 
| </header> 
| <article data-role="content" class="content list ui-content" role="main"> </article> 
<footer id="qunarFooter" class="qn_footer"> </footer> 


| 下 面 我 们 重点 分 析 一 下 中 间 区 域 的 主体 内 容 块 和 页 脚 栏 的 设计 

| 第 1 步 ， 主 体 区 域 使 用 <article data-role="content" class="content list ui-content" role="main"> 定义 ， 其 
| 包裹 一 个 列表 结构 <ul id="albumList" data-inset="true" data-header-theme="e"> 

| 第 2 步 ， 在 列表 框 中 包含 两 个 列表 项 目 ， 每 个 列表 项 目 结构 相同 

| <li><a href="#" onclick="" rel="external” class="ui-link"> <img src="images/01.jpe" original="#ipg" width="300" 
height="170" /> </a> 

| <section class="text_layer p10 font-yahei"> 

| <h2 class="f16 fb fefefe 血 -tl"> 烟花 三 月 </h2> 

| <aside class="fl2 bbb"> <span class="fn-fl">2014-04-05【 3 天 81 张 图 ] 瘦 西湖 </span> <span class="fn-fr"> 
| by 小 丽 </span> </aside> 

</section> 


| </> 


| 列表 项 目 包含 一 个 大 的 分 享 图 片 ， 以 及 图 片 的 相关 说 明 人 信息， 说 明 信 息 使 用 <section class="text_layer 
| p10 font-yahei"> 进行 组 织 ， 其 中 使 用 <h2> 定义 说 明 的 标题 ， 使 用 <aside class="f12 bbb"> 定义 分 享 的 图 片 
| 数 、 地 点 和 作者 。 

| 第 3 步 ， 本 示例 的 组 件 样式 模仿 了 jQuery Mobile， 考 虑 到 jQuery Mobile 框架 比较 大 ， 这 里 仅 把 需要 的 
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组 件 样式 复制 过 来 进行 设计 ， 然 后 在 class 中 进行 引用 。 
第 4 步 ， 通 过 定位 的 方式 ， 把 <section class="text layer p10 font-yahei"> 固定 在 图 片 的 底部 ， 以 半 透 明 | 
色 进行 显示 ,效果 如 图 11.8 所 示 。 | 


图 11.8 设计 图 片 文字 说 明 样 式 | 
样式 代码 如 下 


:text_layer { width: 280px; position: absolute: bottom: 0; left: 0; background-color: rgba(0, 0, 0. 0.6); opacity: 1; text- | 
shadow: none: } | 
第 5 步 ， 在 <article> 包含 框 底部 放置 一 个 长 条 形 按钮 ， 代 码 如 下 

<div data-role="button" data-theme="a" onclick="nextPage ( ) " id="change" class="f14 ui-btn ui-btn-up-a ui-shadow | 
ui-btn-corner-all" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span"> <span | 
class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"> 点 击 查看 更 多 </span></span> </div> 


这 里 完全 套用 了 jQuery Mobile 按钮 组 件 的 样式 设计 | 

第 6 步 ， 在 <footer id="qunarFooter" class="qn_footer"> 区 域 包含 了 4 行 结构 。 第 一 行使 用 <div class= | 
"main_nav_wrapper"> 定义 ， 其 包含 一 个 列表 结构 <ul class="main_nav" id="qunarFooterUL">， 其 中 包 玩 了 多 
个 导航 按钮 ， 样 式 也 采用 了 jQuery Mobile 导航 按钮 组 件 的 设计 ， 如 图 11.9 所 示 


点 击 查看 更 多 


图 11.9 设计 导航 按钮 组 样式 | 

第 7 步 ， 第 二 行 是 一 个 列表 结构 ， 使 用 <ul class="footer nav" id="qunarFooterBottom"> 定义 ， 它 包 | 
含 多 个 导航 链接 文本 ， 包 括 登录 、 我 的 订单 、 最 近 浏 览 、 关 于 我 们 。 第 三 行 也 是 一 个 列表 结构 ， 使 用 <ul | 
class="mobile pc"> 定义 ， 包 括 触 屏 版 、 电 脑 版 。 第 四 行使 用 <div class="copyright"> 定义 版 权 信息 区 块 。 
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11.3.8 设计 图 片 列 表 页 面 


| 本 节 示 例 模拟 马蜂 窝 的 推荐 旅游 目的 地 网 页 ， 效果 如 图 11.10 所 示 。 整 个 页 面 从 上 至 下 包括 4 个 组 成 部 
| 分 ， 分别 为 链接 按钮 和 标题 文字 、 搜 索 文本 框 、 选 项 卡 标题 栏 、 推 荐 旅游 目的 地 的 图 片 列表 。 


< 推荐 旅游 目的 地 ”器 


QQ 搜索 你 想 去 的 地 方 


推荐 国内 国际 


| 
| 
| 
| 
| | 诗情画意 ， 山 水 中 的 彩 时 美学 
| 
| 
| 
| 


| 一 朝 花枝 俏 ， 且 行 且 赴 早 


图 11.10 设计 图 片 列表 页 面 


页 面 基本 框架 代码 如 下 。 

<header class="m-head"> </header> 
<section class="mdd sea"> </section> 
<nav class="mdd menu"> </nav> 
<section class="mdd_con"> </section> 


| 
| 

| 

| 

| 

| 

| 第 1 步 ， 首 先 我 们 来 看 一 下 标题 栏 。 标 题 栏 包含 1 个 标题 和 3 个 按钮 。 左 侧 是 “返回 ”按钮 图 标 ， 中 
| 间 为 标题 文本 ， 碳 侧 为 联系 信息 按钮 ， 以 及 “打卡 ”按钮 ， 结 构 代 码 如 下 。 

| <header class="m-head"> 

| <a class="btn back" href="http: //m.mafengwo.cn/" id="head_return_btn"></a> 

| <div class="bar-c"> 

| <hl> 推荐 旅游 目的 地 </h1> 

| </div> 

| <a class="btn message" href—="#"></a> 

| <div class="bar-r"> <a href="http: //m.mafengwo.cn/login.php?s=1" id="btn_card" class="nav ka"> 打 卡 </a> </ 
| div> 

| 
| 
外 


第 2 步 ， 标 题 栏 下 面 是 一 个 大 的 搜索 文本 框 ， 使 用 <section class="mdd sea"> 包 庄 。 搜 索 框 使 用 
| autocomplete="on" 开启 自动 完成 功能 ， 定 义 placeholder 自动 提示 文本 。 


| <section class= "mdd sea"> 


0 


第 ]] 间 设计 响应 式 图 片 


<input type="search" name="q" autocomplete="on" id="mdd search box new" placeholder=" 搜索 你 想 去 的 地 
方 " 户 
</div> 


T 
| 
| 
| 

<div class="searcher"> | 
| 
| 
| 
| 

</section> | 


第 3 步 ， 搜 索 框 下 面 是 一 个 导航 菜单 ， 使 用 <nav class="mdd menu"> 设计 。 然 后 通过 CSS+JavaScript 配 
合 设计 为 Tab 选项 卡 样式 ， 如 图 11.11 所 示 。 


| 
| 
<nav class="mdd menu"> | 
<ul> | 
<li><em></em><a hre 伍 "#" class="on"> 推荐 </a></li> 
<li><em></em><a href="#" class=""> 国内 </a></li> | 
<li><em></em><a href="#" class=""> 国际 </a></li> | 
</ul> | 
</nav> 


推荐 国内 国际 


js 
图 11.11 设计 选项 卡 面板 


第 4 步 ， 在 选项 卡 标 题 栏 下 面 ， 是 选项 卡 内 容 区 域 ， 当 点 击 “ 推 荐 ”“ 国 内 ”“ 国 际 ”不 同 选项 后 , 主 | 
体 区 域 会 切换 显示 不 同 的 内 容 项 目 。 由 于 本 例 是 以 模板 形式 进行 设计 ， 内 容 显示 将 作为 后 期 工作 ， 由 后 台 | 
动态 生成 。 结 构 如 下 。 | 


| 
<section class="mdd con"> 
<div class="mdd_ box"> | 
<div class="mdd tit"> <span> <strong style="font-size: 16px: font-weight: normal: "> 诗情画意 </strong>, 山 | 

水 中 的 彩 墨 美学 </span> </div> | 

<div class="slider-wrapper"> | 

<ul class="mdd silde"> | 

<li><a hre 人 ="#"><img class="lazy" data-url="#.jpeg" /><span> 宏 村 </span></a></li> | 

<li><a href="#"><img class="lazy" data-url="#.jpeg" src="images/01.jpeg" /><span> 千岛 湖 </span> 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


| 

| 

| 

i | 

| 诗情画意 ， 山 水 中 的 彩 盟 美学 | 
| 

| 

| 

| 

| 


</a></li> 
</ul> 
<ul class="mdd_silde">……</ul> 
</div> 

</div> 
<div class="mdd box">……</div> 
</section> 


结构 由 <section class="mdd_con"> 定义 ， 内 部 包含 两 个 <div class="mdd_box"> 例子 ， 每 个 盒子 中 | | 
i 坦 二 分 : 标题 框 <div class="mdd_tit"'> 和 内 容 框 <div class="sliderwrapper">， 内 容 框 内 定义 一 一 个 列表 | 
结构 ,包含 两 个 项 目 ， 分 别 用 来 显示 一 个 图 文 信息 ， 如 图 11.12 所 示 。 | 
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| 诗情画意 ， 山 水 中 的 彩 驾 美 学 


图 11.12 设计 图 文 列表 栏目 


11.4 ”在线 练 习 


| 多 媒体 已 成 为 网 站 的 必 备 元 素 ， 使 用 多 媒体 可 以 丰富 网 站 的 效果 和 内 容 ， 带 给 人 充实 的 视觉 体验 ， 体 
| 现 网 站 的 个 性 化 服务 ， 吸引 用 户 的 回流 ， 突 出 网 站 的 重点 。 本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 
| 使 用 HTMLS 多 媒体 API 丰富 页 面 信息 
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设计 移动 表单 


( 名 视频 讲解 : 1 小 时 12 分 钟 ) 


表单 为 访问 者 提供 了 与 网 站 进行 交流 的 途径 。 表 单 有 两 个 基本 组 成 部 分 : 访问 者 在 
页 面 上 可 以 看 见 并 填写 的 控件 、 标 签 和 按钮 的 集合 ， 以 及 用 于 获取 表单 信息 ， 并 将 其 转 
化 为 可 以 读 取 或 计算 的 格式 的 处 理 脚 本 。 

在 HTML5 之 前 ， 要 添加 日 期 选择 器 、 占 位 符 文 本 和 范围 滑 块 等 到 表单 中 ， 总 是 
依靠 JavaScript。 同 样 ， 也 没有 简单 的 方式 来 告诉 用 户 我 们 期 望 的 输入 值 ， 如 电话 号 码 
邮件 地 址 或 者 URL 等 ，HTML5 基本 上 解决 了 这 些 问题 。 本 章 将 重点 介绍 HTML5 中 的 
表单 将 性 ， 学 会 如 何 使 用 最 新 的 CSS 功能 在 多 个 设备 上 简单 布置 我 们 的 表单 。 


【学 习 重 点 】 

PD 创建 表单 。 

WI 创建 文本 杠 、 密 码 杠 、 文 本 区 域 、 电 子 邮 件 (E-mail) 框 等 各 种 输入 框 。 
WI 创建 单 迁 按 钮 、 复 迁 框 、 选 择 杠 、 提 交 按 钮 等 各 种 交互 控件 。 

了 对 表单 元 素 进行 组 织 。 


es 各 和 Waik 开 雪 信 和 站 到 精通 ( 蕉 课 靖 关 及) 


12.1 认识 HIMLS 表单 


‘Note HTML5 Web Forms 2.0 ( http://www.w3.org/Submission/web-forms2/ ) 对 HIML4 表单 进行 全 面 升级 ,在 
| 保持 原 有 简便 易 用 的 特性 基础 上 ， 增 加 了 许多 内 置 控件 、 属 性 ， 以 满足 用 户 的 设计 需求 。 通 过 访问 https:// 
|_caniuse.com/ 可 以 了 解 浏览 器 对 HTML5 Web Forms 2.0 的 支持 情况 。 
| HTML5 新 增 输入 型 表单 控件 如 下 。 
| 回 电子 邮件 框 : <input type="email">。 
| 回 搜索 框 : <input type="search">。 
| 回 电话 框 : <input type="tel">。 
| 回 URL 框 : <input type="url">。 
| 以 下 控件 得 到 了 部 分 浏览 器 的 支持 ， 更 多 信息 参见 www.wufoo.conyhtml5。 
| 加 日 期 : <input type="date">， 浏览 器 支持 参见 https: //caniuse.com/#feat=input-datetime。 
| 回 数字 : <input type="number">， 浏 览 器 支持 参见 https: //caniuse.comy/#feat=input-number。 
| 回 范围 : <input type="range">， 浏 览 器 支持 参见 https: //caniuse.com/#feat=input-range。 
| 回 数据 列表 : <input type="text" name="favfruit" list="fruit" /> 
| <datalist id="fruit"> 
| <option> 备 选 列表 项 目 1</option> 
| <option> 备 选 列表 项 目 2</option> 
| <option> 备 选 列表 项 目 3</option> 

</datalist> 
下 面 的 控件 或 者 元 素 在 最 终 规范 出 来 之 前 争议 较 大 ， 浏 览 器 厂商 对 其 支持 也 不 统一 ，W3C 曾经 指出 它 
| 们 在 2014 年 定案 之 时 很 可 能 不 会 列 和 人 HIML5， 但 是 最 终 还 是 相互 妥协 ， 保 留 了 下 来 。 

| 颜色 : <input type="color" />。 

全 局 日 期 和 时 间 : <input type="datetime" />。 

局 部 日 期 和 时 间 : <input type="datetime-local" />。 

月 : <input type="month" />。 

时 间 : <input type="time" 户 。 

周 : <input type="week" />。 

输出 : <output></output>。 

HTMLS5 新 增 的 表单 属性 如 下 。 

accept: 限制 用 户 可 上 传 文件 的 类 型 。 

autocomplete: 如 果 对 form 元 素 或 特定 的 字段 添加 autocomplete="off'， 就 会 关闭 浏览 器 对 该 表单 或 

该 字段 的 自动 填写 功能 。 默 认 设置 为 on。 

autofocus: 页 面 加 载 后 将 焦点 放 到 该 字段 中 。 

multiple: 允许 输入 多 个 电子 邮件 地 址 ， 或 者 上 传 多 个 文件 。 

list: 将 datalist 与 mput 联系 起 来 。 

maxlength: 指定 textarea 的 最 大 字符 数 ， 在 HTML5 之 前 的 文本 框 就 支持 该 特性 。 

pattem : 定义 一 个 用 户 所 输入 的 文本 在 提交 之 前 必须 遵循 的 模式 。 


办 轨 办 办 办 办 办 轨 


办 办 办 民 
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办 多 多 


placeholder: 指定 一 


novalidate: 关闭 HTML5 的 自动 验证 功能 。 


个 出 现在 文本 框 中 的 提示 文本 ， 用 户 开始 输入 后 ， 该 文本 消失 。 
required: 需要 访问 者 在 提交 表单 之 前 必须 完成 该 字段 。 
formnovalidate: 关闭 HTMLS5 的 自动 验证 功能 。 应 用 了 


12.2 定义 表单 


F 提 交 按 钮 。 


应 用 于 表单 元 素 。 


次 提示 : 访问 https://github.com/ryanseddon/H5F， 下 载 JavaScript 插件 ， 可 以 为 旧 的 浏览 器 提供 模仿 
HTML5 表单 行为 的 一 般 方法 。 


表单 结构 一 般 都 以 <form> 开始 ， 以 </form> 结束 。 两 个 标签 之 间 是 组 成 表单 的 标签 、 控 件 和 按钮 。 访 | 


问 者 通过 提交 按钮 提交 表单 ， 填 写 
【示例 1】 新建 HTML5 文档 ,保存 为 test.html， 在 <body> 内 使 用 <form> 标签 ， 包 含 两 个 <input> 标签 | 


的 信息 就 会 发 送 给 服务 器 。 


和 一 个 提交 按钮 ， 并 使 用 <p> 标签 把 按钮 和 文本 框 分 行 显示 。 


<h2> 会 员 登 录 </h2> 
<form action="#" method="get" id="forml" name="fomml"> 
<p> 会 员 : <input name="user" id="user" type="text" /></p> 


<p> 密码 : <input name="password" i 


<p><input type="submit" value=" 登录 "/></p> 


</form> 


<form> 开始 标签 可 以 有 一 些 属性 ， 其 中 最 重要 的 就 是 action 和 
method。 将 action 属性 的 值 设 为 访问 者 提交 表单 时 服务 器 上 对 数据 
进行 处 理 的 脚本 的 URL。 例 如 ， 

method 属性 的 值 要 么 是 get， 
不 过 每 种 方法 都 有 其 用 途 ， 了 解 其 用 途 有 助 于 理解 它 
， 演 示 效 果 如 图 12.1 所 示 。 
Form 元 素 包含 很 多 属性 ， 其 中 HIMLS 支持 的 属性 如 表 12.1 


以 使 用 post， 


们 。 在 正 浏 览 嚣 中 预览 


action="save-info.php" 


要 么 是 post。 大 多 数 情 况 下 都 可 


"password" type="text" /></p> 


图 12.1 表单 的 基本 效果 


? [SECT [ZX 


所 示 。 
HTML5 支持 的 form 属性 

属 性 说 ”有明 
accept-charset | charset list 规定 服务 器 可 处 理 的 表单 数据 字符 集 
action URL 规定 当 提交 表单 时 向 何 处 发 送 表 单数 据 
autocomplete | on off 规定 是 否 启用 表单 的 自动 完成 功能 

application/x-www-form-urlencode ( 默认 内 容 类 型 )| ,wj ww 前 如 何 对 其 进行 编 三 

enctype 和 multipart/form-data ( 二 进 制 编码 形式 进行 传输 ) 规定 在 发 送 表 单数 据 之 前 如 何 对 其 进行 编码 
method get、 post 规定 用 于 发 送 form-data 的 HTTP 方法 
name form name 规定 表单 的 名 称 
novalidate novalidate 如 果 使 用 该 属性 ， 则 提交 表单 时 不 进行 验证 
target ce Des Poel 规定 在 何 处 打开 action URL 


_top 、framename 
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| 
| 
| 【示例 2】 下面 是 一 个 简单 的 用 户 登录 表单 。 
| 
| 
| 
| 
| 


| <form method="post" action="show-data.php"> 
| <! 各 种 表单 元 素 > 
<fieldset> 

<h2 class="hdr-account"> 登录 </h2> 


Note <div class="fields"> 


<p class="row"> 
<label for="first-name"> 用 户 名 : </label> 
<input type="text" id="first-name" name="first name" class="field-large" /> 
</p> 
<p class="row"> 
<label for="last-name"> 昵称 : </label> 
<input type="text" id="last-name" name="last_ name" class="field-large" /> 
<p> 
</div> 
</fieldset> 
<!-- 提交 按钮 -> 
<input type="submit" value=" 提 交 " class="btn" /> 
</form> 


| 

| 

| 

| 

| 

| 

上 

| 

| 

| 

| 

| 

| 

”党 提示 : 如 果 对 表单 使 用 method-="get"， 那 么 表单 提交 后 ， 表 单 中 的 数据 会 显示 在 浏览 器 的 地 址 栏 里 。 
| 通常 ， 如 果 希 望 表单 提交 后 从 服务 器 得 到 信息 ， 就 使 用 get。 例如， 大 多 数 搜索 引擎 都 会 在 搜索 
| 表单 中 使 用 get 提交 表单 ， 搜 索引 擎 会 得 到 搜索 结果 。 由 于 数据 出 现在 URL 中 ， 因 此 用 户 可 以 
| 保存 搜索 查询 ， 或 者 将 查询 发 给 朋友 。 

| 如 果 对 表单 使 用 method="post"， 那 么 提交 表单 后 ， 表 单 中 的 数据 不 会 显示 在 浏览 器 的 地 址 栏 
| 里 ， 这 样 更 为 安全 。 同 时 ， 比 起 get， 使 用 post 可 以 向 服务 器 发 送 更 多 的 数据 。 通 常 ，post 用 
| 于 向 服务 器 存 入 数据 ， 而 非 获取 数据 。 因 此 ， 如 果 需 要 在 数据 库 中 保存 、 添 加 和 删除 数据 ， 就 
应 选择 posts 例 如 ， 电 子 商务 网 站 使 用 post 保存 密码 、 邮 件 地 址 以 及 其 他 用 户 输 入 的 信息 。 通 常 ， 
如 果 不 确 定 使 用 哪 一 种 ， 就 使 用 post， 这 样 数 据 不 会 暴 替 在 URL 中 。 

| 

| 

| 

|] 

| 

| 

| 

| 


12.3 提交 表单 


| 表单 从 访问 者 那里 收集 信息 ， 最 终 还 需要 把 收集 的 信息 发 送 给 服务 器 ， 这 个 操作 过 程 就 是 提交 表单 ， 
| 涉及 两 个 技术 : 表单 验证 和 数据 处 理 。 

| 表单 验证 指 的 是 提交 表单 时 ， 对 用 户 输入 的 每 个 字段 的 内 容 进行 检查 ， 看 是 否 符合 预期 的 格式 。 例 如 ， 
| 对 于 电子 邮件 字段 ， 检 查 输入 是 否 为 正确 的 电子 邮件 地 址 格式 。 

| 表单 验证 的 任务 可 以 归纳 下 面 几 种 类 型 : 


网 加 加 名 
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回 “ 特 丈 验证。 

必 填 检查 是 最 基本 的 任务 。 常 规 设计 中 包括 3 种 状态 : 输入 框 获取 焦点 提示 ; 输入 框 失去 焦点 验证 错误 
提示 ; 输入 框 失去 焦点 验证 正确 提示 。 首 先 确定 输入 框 是 否 是 必 填 项 ， 然 后 就 是 提示 消息 的 显示 位 置 。 

范围 校 验 稍微 复杂 一 些 ， 在 校 验 中 需要 做 如 下 区 分 : 输入 的 数据 类 型 为 字符 串 、 数 字 和 时 间 。 如 果 是 字 | 
符 串 ， 则 比较 字符 串 的 长 短 ; 对 数字 和 时 间 康 水 ， 则 比较 值 的 大 小 。 | Note 

比较 验证 相对 简单 ， 无 须 考虑 输入 内 容 ， 只 需要 引入 一 个 正则 表达 式 就 可 以 了 。 

格式 验证 和 特殊 验证 ， 都 必须 通过 正则 表达 式 才能 够 完成 。 

有 的 HIMLS 表单 元 素 有 内 置 的 验证 功能 ， 表 单 验证 一 般 在 客户 端 使 用 JavaScript 脚本 完成 ， 出 于 安全 
性 考虑 ， 特 殊 值 验证 需要 在 服务 器 端 执行 ， 如 注册 的 用 户 名 是 否 存在 ， 用 户 输入 密码 是 否 正确 等 。 

数据 处 理 主要 在 服务 器 端 完成 ， 服 务 器 端 脚本 可 以 将 信息 记录 到 服务 器 上 的 数据 库 里 ， 通过 电子 邮件 
发 送信 息 ， 或 者 执行 很 多 其 他 的 功能 。 

对 于 刚 起 步 的 读者 来 说 ，PHP 是 一 个 不 错 的 选择 ， 因 为 用 它 处 理 一 些 常见 任务 很 简单 。 除 了 PHP， 还 
可 以 选择 其 他 语言 ， 如 Django、Ruby、ASPNET 、JSP 等 。 | 


12.4 组 织 表单 


使 用 fieldset 元 素 可 以 组 织 表单 结构 ， 为 表单 对 象 进行 分 组 ， 这 样 表单 会 更 容易 理解 。 在 默认 状态 下 ， 
分 组 的 表单 对 象 外 面 会 显示 一 个 包围 框 。 

使 用 legend 元 素 可 以 定义 每 组 的 标题 ， 描 述 每 个 分 组 的 目的 ， 有 时 这 些 描述 还 可 以 使 用 hl ~ h6 标题 。 | 
默认 显示 在 <fieldset> 包含 框 的 左上 角 。 

对 于 一 组 单 选 按钮 或 复 选 框 ， 建 议 使 用 <fieldset> 把 它们 包围 起 来 ， 为 其 添加 一 个 明确 的 上 下 文 ,让 表 | 
单 结构 显得 更 清晰 。 | 

【示例 】 本 例 编写 一 个 复杂 的 表单 结构 ， 设 计 一 个 网 站 调查 页 面 。 在 表单 结构 中 为 2 个 表单 部 分 分 别 使 
用 fieldset， 同 时 为 其 添加 了 一 个 legend 元 素 ， 用 于 描述 分 组 的 内 容 。 效 果 如 图 12.2 所 示 。 


| 

| 

| 

<hl> 用 户 信息 登录 </h1> 
<form action="#" class="form1"> 

<fieldset class="fld1"> | 

<legend> 个 人 信息 </legend> | 

<p><label for="name"> 姓名 </label><input id="name"></p> | 

<p><label for="address"> 地 址 </label><input id="address"></p> | 

<p><label for="sex"> 性 别 </label> | 

<select id="sex"> | 

<option value="female"> 女 </option> | 

<option value="male"> 男 </option> | 

</select> | 

| 

| 

| 

| 

| 


<fieldset class="fld2"> 
<legend> 其 他 信息 </legend> | 
<p><fieldset> | 
<legend> 你 喜欢 什么 运动 ?</legend> | 
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<label for="football"> 
<input id="football" name="“yundong” type="checkbox"> 足球 </label> 
<label for="basketball"> 


| <input id="basketball" name="“yundong” type="checkbox"> 篮球 </label> 


<label for="ping"> 


<input id="ping" name="“yundong” type="checkbox"> 乒乓 球 </label> 


</fieldset></p> 
<p><fieldset> 


</fieldset></p> 
</fieldset> 


</form> 


好 
地 直 
EE 


其 他 信息 


你 喜欢 什么 运动 ? 
口 足球 口 篮球 口 乒乓 球 


请 写 下 你 的 建议 ? 


提交 个 人 信息 


| fieldset 和 legend。 


| 回 
视频 讲解 
非 标准 化 的 短信 息 ， 应 该 到 


| <legend> 请 写 下 你 的 建议 ?</legend> 
| <label for="comments"> 
<textarea id="comments" rows="7" cols="25"></textarea></label> 


<input value=" 提交 个 人 信息 " type="submit"> 


© BET noo | 


图 12.2 设计 表单 结构 分 组 


| legend 可 以 提高 表单 的 可 访问 性 。 对 于 每 个 表单 字段 ， 屏 幕 阅读 器 都 会 将 与 之 关联 的 legend 文本 念 出 
| 来 ， 从 而 让 访问 者 了 解 字段 的 上 下 文 。 这 种 行为 在 不 同 的 屏幕 阅读 器 和 浏览 器 上 并 不 完全 一 样 ， 不 同 的 模 
| 式 下 也 不 一 样 。 因 此 可 以 使 用 hl~h6 标题 代替 legend 来 识别 一 些 fieldset。 但 是 对 于 单 选 按钮 ， 建 议 使 用 


12.5 定义 文本 杠 


E 议 用 户 输入 ， 而 不 是 让 用 户 选择 ， 如 姓名 、 地 址 、 电 话 等 。 使 用 输入 框 收 


“集会 比 使 用 选择 的 方式 收集 更 加 简便 、 宽 容 。 
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文本 框 是 用 户 提交 信息 最 主要 的 控件 ， 定 义 方法 如 下 。 


四 
四 
回 


第 一 种 方式 : <input />。 
二 种 方式 : <input type="" />。 
第 三 种 方式 : <input type="text" 人 >。 


oR 


遵循 HTML 标准 ， 推 荐 第 三 种 方式 定义 文本 框 。 


【示例 】 下 面 的 示例 使 用 HTMLS5 新 增 的 13 种 类 型 文本 框 ， 定义 了 一 个 表单 页 面 


框 的 显示 效果 ， 如 图 12.3 所 示 。 表 单 结构 代码 如 下 。 


<form action="#"> 


<fieldset> 
<legend> 输入 型 文本 框 </legend> 
<label for="email">Email</label> 
<input type="email” name="email” id="email” /> 
<label for="url">Url</label> 
<input type="url” name="url" id="url" /> 
<label for="number">Number</label> 
<input type="number" name="number" id="number" step="3"/> 
<label for="tel">Tel</label> 
<input type="tel” name="tel" id="tel" /> 
<label for="search">Search</label> 
<input type="search" name="search" id="search" /> 
<label for="range">Range</label> 
<input type="range"” name="range" id="range" value="100" min="0" max="300" /> 
<label for="color">Color</label> 
<input type="color” name="color" id="color" /> 
</fieldset> 
<fieldset> 
<legend> 日 期 时 间 型 文本 框 </legend> 
<label for="time">Time</label> 
<input type="time"” name="time" id="time" /> 
<label for="date">Date</label> 
<input type="date"” name="date" id="date" /> 
<label for="month">Month</label> 
<input type="month" name="month" id="month" /> 
<label for="week">Week</label> 
<input type="Wweek" name="Wweek" id="Wweek" /> 
<label for="datetime">Datetime</label> 
<input type="datetime" name="datetime" id="datetime" /> 
<label for="datetime-local">Datetime-Local</label> 
<input type="datetime-local” name="datetime-local” id="datetime-local" /> 
</fieldset> 
<input type="submit” value=" 提 交 " 广 


</form> 


在 上 面 的 代码 中 ， 为 每 个 文本 框 设置 name 和 过 属性 ,name 是 提交 数据 的 句柄 过 是 Javaseript 和 | 
Css 控制 句柄 ， 或 者 作为 for 的 绑 定 目标 。 只 有 在 希望 为 文本 框 添加 默认 值 的 情况 下 才 需 要 设置 value 属性 。 
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比较 不 同类 型 文 本 


eic 各 mx 下 直 信和 站 到 精通 ( 蕉 课 靖 病 服 ) 


C |@ localhost/tast/test html 


三 输入 型 广 本 框 一 厂 BsBoy 间 到 本 性 
Email Time 


| 
| 
| 
| 
| 
| 
| 
El ~ 但 


Month 
—# 月 
week 

一 和 一 台 


Datetime 


Datetime-Local 
年 /月 /6 一 :一 


图 12.3 ”比较 不 同类 型 的 输入 文本 框 


12.6 定义 标签 


使 用 label 元 素 可 以 定义 表单 对 象 的 提示 信息 。 通 过 for 属性 ， 可 将 提示 信息 与 表单 对 象 绑 定 在 一 起 。 
| 设计 方法 : 设置 for 属性 值 与 一 个 表单 对 象 的 id 的 值 相同 ， 这 样 label 就 与 该 对 象 显 式 地 关联 起 来 了 。 当 用 
户 单 击 提示 信息 时 ， 将 会 激活 对 应 的 表单 对 象 。 这 对 提升 表单 的 可 用 性 和 可 访问 性 都 有 帮助 。 
| 提示 ， 如 果 不 使 用 for 属性 ， 通 过 label 元 素 包含 表单 对 象 ， 也 可 以 实现 相同 的 设计 目的 。 
【示例 】 本 示例 使 用 label 定义 提示 标签 ， 提 升 用 户 体 验 。 表 单 结构 如 下 。 
<hl> 会 员 登 录 </h1> 
<form action="#" method="get" id="forml" name="forml"> 
<p class="row"> 
<label for="name"> 会 员 <span class="required">*</span></label> 
<input type="text" id="name" name="name" required="required" aria-required="true" /> 
</p> 
有 class="row"> 
<label for="password"> 密码 <span class="required">*</span></label> 
<input type="password" id="password" name="password" required="required" aria-required="true" /> 


</p> 

<p class="row center"><input type="submit" value=" 登录 "人 > </p> 
</form> 
然后 使 用 CSS 为 标签 添加 样式 ， 让 表单 变 得 更 方便 使 用 和 更 好 看 。 
label fj* 标签 样式 *#/ 

cursor: pointer: 


display: inline-block: 
padding: 3px 6px: 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| text-align: right: 
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width: 80px: 
Vertical-align: top: 
定义 eursor pointer ， 当 访问 者 指向 标签 时 ， 显 示 为 手 形 就 能 提示 用 户 这 是 一 个 可 以 操作 的 元 素 。 使 用 | 喜 
vertical-align: top; 让 标签 与 相关 的 表单 字段 对 齐 。 设 计 效 果 如 图 12.4 所 示 。 Note 


| 

2 | 

局 本 EECEEG ET | 
| 

| 
会 员 登 录 | 
| 

| 

| 

| 

| 


会 员 * | 张 = 


密码 * [oooevere 


登录 


图 12.4 添加 提示 文本 | 
for 属性 关联 还 可 以 让 屏幕 阅读 器 将 文本 标签 与 相应 的 字段 一 起 念 出 来 。 这 对 不 了 解 表单 字段 含义 的 视 | 
障 用 户 来 说 是 多 么 重要 。 出 于 这 些 原因 ， 建 议 用 户 在 label 元 素 中 包含 for 属性 。 | 


12.7 使 用 常用 控件 


上 面 介 绍 了 文本 输入 框 控件 的 基本 使 用 方法 ， 它 也 是 最 常用 的 表单 对 象 ， 下 面 再 介绍 另外 几 个 常用 的 | 
表单 控件 。 | 


12.7.1 密码 框 


| 
| 
密码 框 是 一 种 特殊 用 途 的 文本 框 ， 专 门 输入 密码 ， 通 过 type="password" 定义 ,输入 的 字符 串 以 圆 点 或 | 
星 号 显示 ,避免 信息 被 身边 的 人 看 到 ， 用 户 输入 的 真实 值 会 被 发 送 到 服务 器 ， 且 在 发 送 过程 中 没有 加 密 。 | 
【示例 】 下 面 的 示例 设计 了 一 个 简单 的 用 户 注 册 表单 页 面 ， 使 用 密码 框 设计 密码 输入 框 和 重 置 密码 输入 | 

框 两 个 对 象 ， 演 示 效 果 如 图 12.5 所 示 。 | 
| 

<form> | 
<fieldset> | 

<legend> 快速 注册 </legend> | 

<p class="row"><label for="name"> 用 户 名 </label> | 

<input type="text" id="name" name="name” /> | 

</p> | 

<p class="row"><label for="email">Email</label> | 

<input type="email" id="email" name="email" placeholder="name@163.com'" /> | 

<p> | 

<p class="row"><label for="password"> 密码 </label> 


<input type="password" id="password" name="password" /> | 
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</p> 
<p class="row"><label for="password2"> 重 置 密码 </label> 
<input type="password" id="password2" name="password2" /> 


</p> 
</fieldset> 
<input type="submit" value=" 提 交 " 亡 
</form> 
图 12.5 设计 用 户 注册 表单 页 面 
12 7.2 单 选 按钮 


使 用 <input type="radio"> 可 以 定义 单 选 按钮 ， 多 个 name 属性 值 相同 的 单 选 按钮 可 以 合并 为 一 组 ， 称 为 


| | 单 选 按钮 组 。 在 单 选 按钮 组 中 ， 只 能 选择 一 个 ， 不 能 够 空 选 或 多 先 。 


在 设计 单 选 按钮 组 时 ， 应 该 设置 单 选 按钮 组 的 默认 值 ， 即 为 其 中 一 个 单 选 按钮 设置 checked 属性 。 如 果 
| 不 设置 默认 值 ， 用 户 可 能 会 漏 选 ， 引 发 歧义 。 
【示例 】 下 面 的 示例 设计 一 个 性 别 选项 组 。 
<fieldset class="radios"> 
<legend> 姓名 </legend> 
<p class="row"> 
<input type="radio" id="gender-male" name="gender" value="male" /> 
<label for="gender-male"> 男士 </label> 
<p> 
<p class="row"> 
<input type="radio" id="gender-female" name="gender" value="female" /> 
<label for="gender-female"> 女士 </label> 
<p> 
</fieldset> 


value 属性 对 于 单 选 按钮 来 说 很 重要 ， 因 为 访问 者 无 法 输入 值 。 推 荐 使 用 fieldset 嵌 套 每 组 单 选 按钮 ， 
| legend 进行 描述 。 


| 12.7.3” 复 选 框 


使 用 <input type="checkbox"> 可 以 定义 复 选 框 ， 多 个 name 属性 值 相同 的 复 选 框 可 以 合并 为 一 组 ， 称 为 


“314。 


性 


| 
| 
复 选 框 组 。 在 复 选 框 组 中 ， 人 允许 用 户 不 选 或 者 多 选 。 也 可 以 使 用 checked 属性 设置 默认 选项 | 
【示例 】 下 面 的 示例 演示 了 如 何 创建 复 选 框 。 | 
<div class="fields checkboxes"> | y 
<p class="row"> | 
<input type="checkbox" id="email" name="email[]" value=" 电子 邮箱 " /> | 
<label for="email"> 电子 邮件 </label> Note 
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目 。 


<p> 
<p class="rOW"> 
<input type="checkbox" id="phone" name="email[]" value=" 电话 " /> 
<label for="phone"> 电话 </label> 
p> 
</div> 


标签 文本 不 需要 与 value 属性 一 致 。 这 是 因为 标签 文本 用 于 在 浏览 器 中 显示 ， 而 value 则 是 发 送 给 服务 | 
器 。 空 的 方 括号 是 为 PHP 脚本 的 name 准备 的 。 使 用 name="boxset" 识别 发 送 至 服务 器 的 数据 ， 同 时 用 于 | 
将 多 个 复 选 框 联系 在 一 起 ( 对 于 所 有 复 选 框 使 用 同一 个 name 值 )。 使 用 id="idlabel " 对 应 于 label 元 素 中 的 
for 属性 值 。 | 
value="data" 里 的 data 是 该 复 选 框 被 选中 时 要 发 送 给 服务 器 的 文本 。 使 用 checked 或 checked="checked" | 
可 以 让 该 复 选 框 在 页 面 打开 时 默认 处 于 选中 状态 。 | 


| 

| 

12.7.4 文本 区 域 | 
| 

如 果 和 希望 用 户 输入 大 段 字符 串 ( 多 行文 本 )， 则 应 该 使 用 textarea 元 素 定义 文本 区 域 控件 。<input | 
type="text" /> 只 能 够 接收 单行 文本 。textarea 元 素 包 含 3 个 专用 属性 ， 简 单 说 明 如 下 。 | 
回 cols: 设置 文本 区 域内 可 见 字符 宽度 。 可 以 使 用 CSS 的 width 属性 代替 设计 。 | 

回 iows: 设置 文本 区 域内 可 见 行 数 。 可 以 使 用 CSS 的 height 属性 代替 设计 。 | 

回 wrap: 定义 输入 内 容 大 于 文本 区 域 宽度 时 显示 的 方式 。 | 

@ soft: 默认 值 ， 提 交 表 单 时 ， 被 提交 的 值 不 包含 不 换行 。 | 

@ hard: 提交 表单 时 ， 被 提交 的 值 包含 不 换行 。 当 使 用 hard 时 ， 必 须 设置 cols 属性 。 | 

【示例 】 下 面 的 示例 设计 了 一 个 简单 的 反馈 表 ， 主 要 使 用 表单 域 fieldset 元 素 、 表 单 域 标题 legend 元 素 、| 
文件 上 传 控件 mput ( type="file" ) 和 文本 域 textarea 元 素 。 显 示 效 果 如 图 12.6 所 示 。 | 
<div class="feedback"> | 

<hl> 反馈 表 <hl> | 

<div class="content"> | 

<form method="post" action=""> | 

<fieldset class="base_info"> | 

<legend> 用 户 信息 </legend> | 

<label for="userName"> 用 户 名 </label> | 

<input type="text" value="" id="userName" /> | 

<label for="email"> 电子 邮件 </label> | 

<input type="text" value="" id="email" /> | 

</fieldset> | 
<fieldset class="feedback_content"> 
<legend> 反馈 信息 </legend> 


“S15 


eic 和 和 wuk 开 安信 和 站 到 精通 ( 蕉 课 靖 病 及 ) 


py 
KX% 

| 

<label for="msg"> 具体 内 容 </label> 

| <textarea rows="8" cols="50" id="msg" placeholder=" 请 填写 详实 的 反馈 意见 。"></textarea> 
| <label for="up_file"> 附件 <label> 

| <input type="file" id="up_file" /> 

| <p class="tips"> 附件 仅 支 持 jpg、.gif、.png 图 片 。</p> 


</fieldset> 
<button type="submit"> 提交 </button> 
<button type="reset"> 重 置 </button> 
</form> 
</div> 
</div> 


i 
风 伯 俊 去 持 jpg、.6[、pms 图 片 


图 12.6 设计 反馈 表 页 面 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

如 果 没 有 设置 maxlength 属性 ， 用 户 最 多 可 以 输入 32700 个 字符 。 与 文本 框 不 同 ，textarea 没有 value 
| 属性 ， 默 认 值 可 以 包含 在 <textarea> 和 </textarea> 之 间 ， 也 可 以 设置 placeholder 属性 定义 占 位 文本 。 
| 提示 ， 默 认 情况 下 textarea 不 会 继承 font 属性 ， 因 此 在 CSS 样式 表 中 需要 显 式 设置 该 属性 。 
| textarea { 

| font: inherit: 

| padding: 2px: 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


12.7.5 选择 框 


选择 框 非常 适合 向 访问 者 提供 一 组 选项 ， 从 而 允许 他 们 从 中 选取 。 它 们 通常 呈现 为 下 拉 菜 单 的 样式 ， 
如 果 人 允许 用 户 选 择 多 个 选项 ， 选 择 框 就 会 呈现 为 一 个 带 滚动 条 的 列表 框 。 
选择 框 由 两 种 HTML 元 素 构成 : select 和 option。 通 常 ， 在 select 元 素 里 设置 name 属性 ， 在 每 个 option 
元 素 里 设置 value 属性 。 
【示例 】 下 面 的 示例 创建 了 一 个 简单 的 城市 下 拉 菜 单 。 
<label for="state"> 省 市 </label> 
<select id="state" name="state"> 
<option value="BJ"> 北京 </option> 
<option value="SH"> 上 海 </option> 


</select> 
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除非 


HTML5 中 均 可 )， 从 而 允许 访问 者 选择 一 个 以 上 的 菜单 选项 ， 选 择 的 时 候 需 按 住 Control 键 或 Command 键 。| 


选中 


属性 


可 以 为 select 和 option 元 素 添 加 样式 ， 但 有 一 定 的 限制 。 
select { 

font-size: inherit: 
1 


CSS 规则 要 求 菜 单 文本 跟 其 父 元 素 字 号 大 小 相同 ， 否 则 默认 情况 下 它 看 上 去 会 


设置 了 size 属性 ， 否 则 访问 者 就 必须 选择 菜单 中 的 某 个 选项 )。 


小 很 多 。 可 以 使 用 CSS 
对 width 、color 和 其 他 的 属性 进行 调整 ， 不过， 不 同 的 浏览 器 呈现 下 拉 菜 单列 表 的 方式 略 有 差异 。 


使 用 size="n" 设置 选择 框 的 高 度 ( 以 行为 单位 )。 使 用 multiple 或 者 multiple="multiple" ( 


默认 的 选择 是 菜单 中 的 第 一 个 选项 ， 或 者 是 在 HIML 中 指定 了 selected 的 选项 ( 需要 注意 的 一 点 是 ，| 


两 种 方法 在 | 


每 个 选项 的 value="optiondata" 属性 是 选项 选中 后 要 发 送 给 服务 器 的 数据 ( 如 果 省 略 value， 则 包含 的 文 | 
本 就 是 选项 的 值 。 使 用 selected 或 者 selected="selected" ( 在 HIMLS 中 两 种 方式 均 可 )， | 


使 用 optgroup 元 素 可 以 对 选择 项 目 进 行 分 组 ， 一 个 optgroup 元 素 包含 多 个 option 元 素 ， 然 后 使 用 label 


设置 分 类 标题 ， 分 类 标题 是 一 个 不 可 选 的 伪 标 题 。 


【示例 】 下 面 的 示例 使 用 了 optgroup 元 素 对 下 拉 菜 单项 目 进 行 分 组 。 


素 和 常 
别 开 。 


的 文 


<selectname=" 选择 城市 "> 
<optgroup label=" 山东 省 "> 
<option value=" 潍坊 "> 潍坊 </option> 
<option value=" 青岛 " selected="selected"> 青岛 </option> 
</optgroup> 
<optgroup label=" 山西 省 "> 
<option value=" 太原 "> 太原 </option> 
<option value=" 榆 次 "> 榆 次 </option> 
</optgroup> 
‘</select> 


每 个 子 菜单 都 有 一 个 标题 ( 在 <optgroup> 开始 标签 的 label 属性 中 指定 ) 和 一 系列 选项 ( 使 用 option 元 | 
常规 文本 定义 )。 浏 览 器 通常 会 对 optgroup 中 的 option 缩 进 ， 从 而 将 它们 和 optgroup label 属性 文本 区 | 


如 果 添 加 了 size 属性 ， 那 么 选择 框 看 起 来 会 更 像 一 个 列表 ， 且 没有 自动 选中 的 选项 ， 除 非 设置 了 selected。 | 


如 果 size 大 于 选项 的 数量 ,访问 者 就 可 以 通过 点 击 空白 区 域 让 所 有 的 选项 处 于 


F 未 选中 状态 。 


可 以 对 option 元 素 添加 label 属性 ， 该 属性 用 于 指定 需要 显示 在 菜单 中 的 文本 ( 替代 了 option 标签 之 间 


本 )， 不 过 Firefox 并 不 支持 这 一 属性 ， 因 此 最 好 不 要 用 它 。 


由 于 设置 了 size 属性， 菜单 显示 为 一 个 有 滚动 条 的 列表 ， 默 认 情 况 下 没有 选中 任何 选项 。 为 <select | 


id="state" name="state" size="3"> 可 以 让 菜单 的 高 度 显示 为 3 行 。 


12.7.6 上传 文件 


有 时 需要 让 网 站 的 用 户 向 服务 器 上 传 文件 ( 如 照片 、 简 历 等 )。 要 让 访问 者 能 够 上 传 文件 ， 


设置 


enctype 属性 ， 创 建 input type="file" 元 素 。 


【示例 】 下 面 的 示例 演示 了 如 何 创 建 上 传 控 件 。 


vals 


必须 正确 地 | 


| 


Note 


2 2 


<form method="post" action="show-data.php" enctype="multipart/form-data"> 
<label for="picture"> 图 片 : </label> 
<input type="file" id="picture" name="picture" /> 
<p class="instructions"> 最 大 700k, JPG, GIF 或 PNG</p> 

</form> 


对 input 元 素 使 用 multiple 属性 可 以 允许 上 传 多 个 文件 ( 这 里 并 没有 包含 该 属性 )。 这 是 HTML5 中 新 增 
的 内 容 ， 它 也 得 到 了 浏览 器 的 广泛 支持 ， 不 过 ， 移 动 端 浏 览 器 和 正 会 直接 忽略 它 ( 正 10+ 开始 支持 )。 

处 理 文件 上 传 需要 一 些 特殊 的 代码 。 可 以 在 网 上 搜索 文件 上 传 脚本 查看 相关 的 资源 。 同 时 ， 服 务 器 需 
要 配置 正确 才能 存储 文件 。 

文件 上 传 域 为 用 户 提供 了 从 其 系统 中 选择 文件 的 方式 。 对 于 type="file" 的 input 元 素 ， 浏 览 器 会 自动 创 
建 浏览 按钮 。Chrome 和 Safari 不 会 创建 框 ， 它 们 只 显示 按钮 。 
浏览 器 通常 不 允许 像 对 其 他 表单 元 素 那样 对 此 类 input 设置 样式 ， 对 于 允许 上 传 的 表单 ， 不 能 使 用 get 
方法 


12.7.7 ”隐藏 字段 


隐藏 字段 可 以 用 于 存储 表单 中 的 数据 ， 但 它 不 会 显示 给 访问 者 。 可 以 认为 它们 是 不 可 见 的 文本 框 。 它 
们 通常 用 于 存储 先前 的 表单 收集 的 信息 ， 以 便 将 这 些 信 息 同 当 前 表单 的 数据 一 起 交 给 脚本 进行 处 理 。 
【示例 】 下 面 的 示例 演示 了 如 何 定义 隐藏 域 。 
<form method="post" action="your-script.php"> 
<input type="hidden" name="step" value="6" /> 
<input type="submit" value=" 提交 " /> 
</form> 


访问 者 不 会 看 到 这 个 输入 框 ， 但 他 们 提交 表单 的 时 候 ， 名 “step” 和 值 “6” 会 随 着 表单 中 从 访问 者 输 
入 获取 的 数据 一 起 传送 给 服务 器 。 创 建 隐藏 字段 时 ， 可 以 使 用 脚本 中 的 变量 将 字段 的 值 设 置 为 访问 者 原来 


输入 的 什 


什么 时 候 使 用 隐藏 字段 ? 

假设 有 一 个 表单 ， 和 希望 让 访问 者 在 提交 表单 之 前 有 机 会 检查 他 们 输入 的 内 容 。 处 理 表单 的 脚本 可 以 向 
访问 者 显示 提交 的 数据 ， 同 时 创建 一 个 表单 ， 其 中 有 包含 同样 数据 的 隐藏 字段 。 如 果 访 问 者 希望 编辑 数据 ， 
他 们 只 需 后 退 就 可 以 了 。 如 果 他 们 想 提交 表单 ， 由 于 隐藏 字段 已 经 将 数据 填 好 了 ， 因 此 他 们 就 不 需要 再 次 
输入 数据 了 。 

隐藏 字段 出 现在 表单 标记 中 的 位 置 并 不 重要 ， 因 为 它们 在 浏览 器 中 是 不 可 见 的 。 不 要 将 密码 、 信 
卡号 等 敏感 信息 放 到 隐藏 字段 中 。 即 便 它 们 不 会 显示 到 网 页 中 ， 访 问 者 也 可 以 通过 查看 HIML 源 代码 看 


六 提示 : 要 创建 访问 者 可 见 但 不 可 修改 的 表单 元 素 ， 有 两 种 方法 : 一 种 是 使 用 disabled ( 禁用 ) 属性 ， 另 
一 种 是 使 用 readonly ( 只 读 ) 属性 。 与 禁用 字段 不 同 ， 只 读 字 段 可 以 获得 焦点 ， 访 问 者 可 以 选 
择 和 复制 里 面 的 文本 ， 但 不 能 修改 这 些 文本 。 它 只 能 应 用 于 文本 输入 框 和 文本 区 域 ， 例 如 : 
<input type="text" 1d="coupon" name="coupon" value="FREE" readonly />。 
还 可 以 使 用 readonly="readonly" 这 样 的 形式 ， 结 果 是 一 样 的 。 


1 
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12.7.8 提交 按钮 


HTMLS5 按钮 分 为 以 下 3 种 类 型 。 / 
回 ”普通 按钮 : 不 包含 任何 操作 。 如 果 要 执行 特定 操作 ， 需 要 使 用 JavaScript 脚本 定义 。 
<input type="button" value=" 按钮 名 称 "> 


<button type="button"> 按钮 名 称 </button> 


回 提交 按钮 : 单 击 按钮 可 以 提交 表单 。 
<input type="submit" value=" 按钮 名 称 "> 
<button type="submit"> 按钮 名 称 </button> 
<input type="image" src=" 按钮 图 像 源 "> 


回 重 置 按钮 : 单 击 按钮 可 以 重 置 表单 ， 恢 复 默认 值 。 


<input type="reset" value=" 按钮 名 称 "> | 
<button type="reset"> 按钮 名 称 </button> | 
| 


注意 ， 如 果 在 HTML 表单 中 使 用 button 元 素 ， 不 同 的 浏览 器 会 提交 不 同 的 值 。IE 将 提交 <button> 与 
</button> 之 间 的 文本 ， 而 其 他 浏览 器 将 提交 value 属性 值 。 因 此 ， 一 般 在 HTML 表单 中 使 用 input 元 素来 创 | 
建 按钮 。 | 

对 于 button 元 素来 说 ， 下 默认 类 型 是 "button"， 而 其 他 浏览 器 默认 值 是 "submit"。 因 此 使 用 button 元 素 | 
时 ， 应 该 明确 定义 type 属性 。 | 

【示例 】 下 面 的 示例 比较 了 3 种 不 同类 型 的 提交 按钮 ， 显 示 效 果 如 图 12.7 所 示 。 | 

<form method="get" action="#"> | 

<input type="text" name="uname" value=" 张 三 " /></br></br> 

<input type="password" name="pwd" value="123" /></br></br> 

<input type="image" src="images/button.png" name="image_btn" value=" 注册 1" /> 

<input type="submit" name="input_btn" value=" 注册 2" > 

<button type="submit" name="button_btn" value=" 注册 3"><img src="images/button.png" ></button> 
</form> 


从 功能 上 比较 ，<input type="image">、<input type="submit"> 和 <button type="submit"> 都 可 以 提交 表 | 
单 ， 不 过 ，<input type="image"> 会 把 按钮 点 击 位 置 的 偏 移 坐标 x、y 也 提交 给 服务 器 。 例 如 ， 如 果 点 击 图 像 | 
按钮 提交 表单 后 ， 则 URL 信息 如 下 : | 
http://localhost/test/test.html?uname=%ES5%BC%AO%E4A%B8%89 pwd=123&image_btn.x=35&image_btn. | 
y=l13&image btn=%E6%B3%A8%ES5%86%8C1# 


12.7 提交 按钮 比较 效果 | 


“19s 


Hes 和 和 sai 并 友人 和 站 天皇 通 ( 蕉 课本 山上) 


示 : 对 于 一 般 表 单 应 用 来 说 ， 在 服务 器 中 都 是 按照 指定 的 name 名 称 来 接收 、 处 理 参数 ， 所 以 即使 


多 了 两 个 参数 也 不 会 有 任何 问题 。 但 是 在 做 支付 接口 的 时 候 ( 如 支付 宝 接口 )， 多 出 两 个 隐藏 
参数 就 会 带 来 很 麻烦 的 问题 ， 因 为 在 提交 表单 之 后 ， 接 收 端 会 对 参数 名 称 进行 MD5 校 验 ， 多 
两 个 参数 会 直接 导致 表单 校 验 不 通过 ， 然 后 支付 失败 的 问题 ， 所 以 在 网 站 开发 中 不 建议 使 用 
<input type="image"> 作为 表单 的 提交 按钮 。 

<input type="image"> 创建 的 图 像 提交 按钮 ， 可 以 使 用 可 选 的 width 和 height 属性 定义 按钮 大 小 。 
如 果 不 填 写 name 属性 ， 则 提交 按钮 的 名 / 值 对 就 不 会 传递 给 服务 器 ， 由 于 一 般 不 需要 这 一 信 
息 ， 因 此 可 以 不 为 按钮 设置 name 属性 。 

如 果 省 略 value 属性 ， 那 么 根据 不 同 的 浏览 器 ， 提 交 按 钮 就 会 显示 默认 的 “提交 ”文本 ， 如 果 
有 多 个 提交 按钮 ， 可 以 为 每 个 按钮 设置 name 属性 和 value 属性 ， 从 而 让 脚本 知道 用 户 按 下 的 是 
哪个 按钮 。 否 则 ， 最 好 省 略 name 属性 。 


12.8 HTMLS5 新 型 输入 框 


定义 E-mail 框 


| email 类 型 的 input 元 素 是 一 种 专门 用 于 输入 E-mail 地 址 的 文本 框 ， 在 提交 表单 的 时 候 ， 会 自动 验证 
| E-mail 输入 框 的 值 。 如 果 不 是 一 个 有 效 的 电子 邮件 地 址 ， 则 该 输入 框 不 允许 提交 该 表单 
【示例 】 下 面 是 email 类 型 的 input 元 素 一 个 应 用 示例 。 

<form action="demo _form.php" method="get"> 

请 输入 您 的 Email 地 址 : <input type="email" name="user_email" /><br /> 

<input type="submit" /> 

</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.8 所 示 。 如 果 输 入 了 错误 的 E-mail 地 址 格式 ， 单 击 
“提交 ”按钮 时 会 出 现 如 图 12.9 所 示 的 提示 。 


[DY localhost/indext.html x Wo=\ [DD localhost/indexi.html x \W—\ 


€ 3 © |© localhost/index1.html 女 | ; © localhost/index1.html 人 女 | 
请 输入 您 的 Email 地 址 ， | 
提交 


图 12.8 email 类 型 的 input 元 素 示例 图 12.9 检测 到 不 是 有 效 的 E-mail 地 址 


对 于 不 支持 type="email" 的 浏览 器 来 说 ， 将 会 以 type="text" 来 处 理 ， 所 以 并 不 妨碍 旧版 浏览 器 浏览 采 


HIML5 中 type="email" 输入 框 的 网 页 。 


HW 
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12.8.2 定义 URL 框 


ul 类 型 的 input 元 素 提供 用 于 输入 url 地 址 的 文本 框 。 当 提交 表单 时 ， 如 果 所 输入 的 是 url 地 址 格式 的 


字符 串 ， 则 会 提交 服务 器 ， 如 果 不 是 ， 则 不 允许 提交 。 
【示例 】 下 面 是 ul 类 型 的 input 元 素 一 个 应 用 示例 。 


<form action="demo form.php" method="get"> 


请 输入 网 址 : <input type="url" name="user_url" /><br/> 
<input type="submit" /> 


</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.10 所 示 。 如 果 输 入 了 错误 的 wl 地 址 格式 ， 单 击 “ 提 | 
交 ” 按 钮 时 会 出 现 如 图 12.11 所 示 的 “请 输入 网 址 ”的 提示 。 | 
注意 ，www.baidu.com 并 不 是 有 效 的 URL， 因 为 URL 必须 以 http: /或 https: / 开头 。 这 里 最 好 使 用 占 | 
位 符 提示 访问 者 。 另外， 还 可 以 在 该 字段 下 面 的 解释 文本 中 指出 合法 的 格式 。 | 


[DY localhost/testihtml x W—\ 


¢>0e 


© localhost/test1.html 


DD localhosthtestihtml x 全 


> [Oommenmm | 


图 12.10 ”url 类 型 的 input 元 素 示 例 


请 输 和 网 太一 了 ] 
提交 


请 输入 网 址 ， 
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图 12.11 检测 到 不 是 有 效 的 url 地 址 


对 于 不 支持 type="url" 的 浏览 器 ， 将 会 以 type="text" 来 处 理 。 


12.8.3 ”定义 数字 框 


的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 如 果 所 输入 的 数字 不 在 限定 范围 之 内 ， 则 会 提示 错误 信息 。 


BH WB 入 RL. 


number 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 12.2 所 示 。 


表 12.2 number 类 型 的 属性 


属 性 什 描 述 
max | number 规定 允许 的 最 大 值 
min | mmber 规定 允许 的 最 小 值 
step | pumber 规定 合法 的 数字 间隔 (如果 step="4"， 则 合法 的 数字 是 -4，0，4，8 等 ) 
value number 规定 默认 值 


【示例 】 下 面 是 number 类 型 的 input 元 素 的 应 用 示例 。 


<form action="demo _ form.php" method="get"> 


21s 


5 人 Hei 乱 和 xik 开 故人 和 站 到 靖 道 ( 基 名 靖 克 由) 


| 
| 
| 
| 
| 请 输入 数值 : <input type="number" name="numberl" min="1" max="20" step="4"> 
| 
| 
| 
| 
| 


<input type="submit" /> 
</form> 

| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.12 所 示 。 如 果 输 入 了 不 在 限定 范围 之 内 的 数字 ， 单 击 

“提交 ”按钮 时 会 出 现 如 图 12.13 所 示 的 提示 。 


D ecdhoanothm x We 


«> e[Gaayerm |: 


请 输入 数值， 3 


FO[Oaoestitim A]: 


请 输入 数值 日 Ea 


BH mF 20, 


图 12.12 ”number 类 型 的 input 元 素 示例 图 12.13 检测 到 输入 了 不 在 限定 范围 之 内 的 数字 


| 图 12.13 所 示 为 输入 了 大 于 规定 的 最 大 值 时 所 出 现 的 提示 。 同 样 ， 如 果 违 反 了 其 他 限定 ， 也 会 出 现 相关 
| 提示。 例如 ， 如 果 输入 数值 15， 则 单 击 “ 提 交 ” 按 钮 时 会 出 现 “ 值 无 效 ”的 提示 ， 如 图 12.14 所 示 。 这 是 
| 因为 限定 了 合法 的 数字 间隔 为 4， 在 输入 时 只 能 输入 4 的 倍数 ， 如 4、8、16 等 。 又 如 ， 如 果 输 入 数值 -12， 
| 则 会 提示 “ 值 必须 大 于 或 等 于 1"， 如 图 12.15 所 示 


| 
| WD locahortoctihtml x WN [DD locahosvtastihiml x WN\ 

| 

| £ 3 © [© localhost/testl.html |]: € > © [© localhost/testl.html 女 ] ; 
| 
| 
| 


请 输入 数值 , 四 一 ES a 请 输入 数值 , [4 E33 


加 卉 拍 入 有 有 效 值 ， 两 个 最 持 近 的 有 效 加 仁 必 须 大 于 或 等 于 1。 | 
全 分 别 为 13 和 17。 | de | 


图 12.14 出现 “ 值 无 效 ”的 提示 图 12.15 提示 “ 值 必须 大 于 或 等 于 1” 


| 
| 
| 
| 12.8.4 定义 范围 杠 

range 类 型 的 input 元 素 提供 用 于 输入 包含 一 定 范 围 内 数字 值 的 文本 框 ， 在 网 页 中 显示 为 滑动 条 。 用 户 
| 可 以 设 定 对 所 接受 的 数字 的 限制 ， 包 括 规定 允许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 如 果 所 


| 输入 的 数字 不 在 限定 范围 之 内 ， 则 会 出 现 错误 提示 。 
range 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 12.3 所 示 。 


| 
| 
| 
| 
| 
| 
| 表 12.3 range 类 型 的 属性 
| 
| 
| 
| 
| 
| 
| 


| 属 性 值 描 述 

| max number 规定 允许 的 最 大 值 

| min number 规定 允许 的 最 小 值 

| _step number 规定 合法 的 数字 间隔 ( 如 果 step="4"， 则 合法 的 数字 是 -4，0，4，8 等 ) 
| Value number 规定 默认 值 


| 从 上 表 可 以 看 出 ，range 类 型 的 属性 与 number 类 型 的 属性 相同 ， 这 两 种 类 型 的 不 同 在 于 外 观 表 现 上 ， 
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文本 框 ， 即 以 type="text" 来 处 理 。 
【示例 】 下 面 是 range 类 型 的 input 元 素 的 应 用 示例 。 


<form action="demo form.php" method="get"> 


| 
| 
支持 range 类 型 的 浏览 器 都 会 将 其 显示 为 滑 块 的 形式 ， 而 不 支持 range 类 型 的 浏览 器 则 会 将 其 显示 为 普通 的 | 
| 
| 
| 


请 输入 数值 : <input type="range" name="rangel" min="1" max="30" /> xbte 
NM 


<input type="submit" /> 
</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.16 所 示 。range 类 型 的 input 元 在 不 同 宙 览 中 的 外 | 
观 也 不 同 ， 例如， 在 Opera 浏览 器 中 的 外 观 效果 如 图 12.17 所 示 。 


口 localhosttesnhml x 
€ 3 CO localhost/testl.html 


ETE 


请 入 入 数值 ， 一 一 目 一 一 国 机 


图 12.16 range 类 型 的 input 元 素 示例 图 12.17 range 类 型 的 input 元 素 在 Opera 浏览 器 中 的 外 观 


12.8.5 ”定义 日 期 选择 器 


日 期 选择 器 (Date Pickers ) 是 网 页 中 经 常 要 用 到 的 一 种 控件 ,在 HTML5 之 前 的 版 本 中 ,并 没有 提供 | 
任何 形式 的 日 期 选择 器 控件 ， 多 采用 一 些 JavaScript 框架 来 实现 ， 如 jQuery UI[、YUI 等 。 

HTML5 提供 了 多 个 可 用 于 选取 日 期 和 时 间 的 输入 类 型 ， 即 6 种 日 期 选择 器 控件 ， 分 别 用 于 选择 以 下 iy | 
期 格式 : 日 期 、 月、 星期 、 时 间 、 日 期 + 时 间 、 日 期 + 时 间 + 时 区 ， 如 表 12.4 所 示 。 


表 12.4 日 期 选择 器 类 型 


HTML 代码 功能 与 说 明 
date <input type="date"> 选取 日 、 月 、 年 
month | <input type="month"> 选取 月 、 年 
week | <input type="week"> 选取 周 和 年 
time | <input type="time"> 选取 时 间 ( 小 时 和 分 钟 ) 
datetime | <input type="datetime"> 选取 时 间 、 日 、 月 、 年 (UTC 时间) 
datetime-local <input type="datetime-local"> 选取 时 间 、 日 、 月 、 年 ( 本 地 时 间 ) 


| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

次 提示 :UTC 时间 就 是 0 时 区 的 时 间 ， 而 本 地 时 间 就 是 本 地 时 区 的 时 间 。 例 如 ， 如 果 北 京 时 间 为 早上 8 点 ，| 
则 UTC 时 间 为 0 点 ， 也 就 是 说 UTC 时 间 比 北京 时 间 晚 8 小 时 。 

1. date 类 型 | 
date 类 型 的 日 期 选择 器 用 于 选取 日 、 月 、 年 ， 即 选择 一 个 具体 的 日 期 ， 例 如 ,2018 年 8 月 8 日 , 选择 | 
后 会 以 2018-08-08 的 形式 显示 。 | 
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【示例 1】 下 面 是 date 类 型 的 日 期 选择 器 的 应 用 示例 。 


<form action="demo form.php" method="get"> 
请 输入 日 期 : <input type="date" name=" datel" /> 


xi 和 zu 开放 从 和 到 类 和 ( 微 课 精 编 版 ) 


<input type="submit" /> 


</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.18 所 示 ， 在 Opera 浏览 器 中 的 运行 结果 如 图 12.19 所 
| 示 。Chrome 浏览 器 并 不 支持 日 期 选择 器 控件 。 而 在 Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 


用 户 可 以 使 用 控件 来 选择 具体 日 期 。 


[DD localhost/testihtml x WN\ 


€ ?> © |© localhost/testl.html 


请 输入 日 期 ， 


图 12.18 在 Chrome 浏览 器 中 的 运行 结果 


ET 


2. month 类 型 
month 类 型 的 日 期 选择 器 用 于 选取 月 、 年 ， 即 选择 一 个 具体 的 月 份 ， 例 如 ，2018 年 8 月 ， 选 择 后 会 以 
| 2018-08 的 形式 显示 。 


【示例 2】 下面 是 month 类 型 的 日 期 选择 器 的 应 用 示例 。 


<form action="demo_form.php" method="get"> 
请 输入 月 份 : <input type="month" name="month1" /> 


<input type="submit" /> 


</form> 


Boo x [°°— ooX 


请 输入 日 期 :| 国 /12/29 PERUES3 


20074129 ~ 


局 -两 二 用 = 周 四 页 五 局 六 
EE 了 


EE 
0 

全 
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7 8 9 
全 合作 
1 22 2 


» lal » 


图 12.19 在 Opera 浏览 器 中 的 运行 结果 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.20 所 示 ， 在 Opera 浏览 器 中 的 运行 结果 如 图 12.21 所 


| 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 只 显示 到 月 份 ， 而 不 会 显示 
| 日期。 在 Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具体 月 份 ， 但 不 


| 能 选择 具体 日 期 。 可 以 看 到 ， 整 个 月 份 中 的 日 期 都 会 以 深 灰 色 显示 ， 单 击 该 区 域 可 以 选择 整个 月 份 。 


DD localhost/test2html x 全 


《>C 


© localhosi/test2.html 


请 输入 月 份 : 


图 12.20 在 Chrome 浏览 器 中 的 运行 结果 


一 -年 二 


localhostaoao/mysite/ x | + 


NY 4 


¢ > C |@ amonanomaienerm ©] 
EPRIEYES 
EE 


和 读 兴 入 月 份 : 


2017EWOR ~ 


图 12.21 在 Opera 浏览 器 中 的 运行 结果 
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3. WwWeek 类 型 | 
week 类 型 的 日 期 选择 器 用 于 选取 周 和 年 ， 即 选择 一 个 具体 的 哪 一 周 ， 例 如 ，2017 年 10 月 第 42 周 , 选 | 
择 后 会 以 “2017 年 第 42 周 ” 的 形式 显示 。 

【示例 3】 下 面 是 week 类 型 的 日 期 选择 器 的 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 选择 年 份 和 周 数 : <input type="week" name="weekl" /> 

<input type="submit" /> | 

</form> | 
| 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.22 所 示 ， 在 Opera 浏览 器 中 的 运行 结果 如 图 12.23 所 | 
示 。Chrome 浏览 器 并 不 支持 日 期 选择 器 控件 。 在 Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 , 用 | 
户 可 以 使 用 控件 来 选择 具体 的 日 期 。 | 


WW localhosta080/mysite/ x + 
《 》C 图 |@ lochosto000n 
请 迁 择 年 份 和 周 效 ; | 回国 年 第 2 周 x 人 Sv 


2007F108 ~ 


[DD localhosttest3html x WV 
€ 3 © |@ localhost/test3.html 
请 选择 年 份 和 周 数 ， [- 一 - 年 第 一 周 


周 - 同 - 周 = 网 周 五 下 所 日 


图 12.22 在 Chrome 浏览 器 中 的 运行 结果 图 12.23 在 Opera 浏览 器 中 的 运行 结果 


4. time 类 型 | 
time 类 型 的 日 期 选择 器 用 于 选取 时 间 ， 具 体 到 小 时 和 分 钟 ， 例 如 ， 选 择 后 会 以 22: 59 的 形式 显示 。 | 
【示例 4】 下 面 是 time 类 型 的 日 期 选择 器 的 应 用 示例 。 | 
<form action="demo_form.php" method="get"> | 
请 选择 或 输入 时 间 : <input type="time" name="timel" /> | 
<input type="submit" /> | 
</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.24 所 示 ， 在 Opera 浏览 器 中 的 运行 结果 如 图 12.25 | 
所 示 。 


localhosc8080/mysite/ x | + de Ym 4 


< >» C BB |@ localhosta080/mysite/test4html [vw] 


请 选择 或 输入 时 间 : [z2: 画 x 引 | 提交 


DD localhost/test4himl xx WW \ 


€ 3 C |O localhost/test4html 食 | : 


请 选择 或 给 入 时 间 ， [一 :-- ”| [要 


图 12.24 在 Chrome 浏览 器 中 的 运行 结果 图 12.25 在 Opera 浏览 器 中 的 运行 结果 | 


2 


a [7His 各 动 2Wit 开发 以 入 门 到 将 大 ( 稚 课 靖 病 县) 


属 性 值 


描述 


Step Dumber 


规定 合法 的 时 间 间 隔 


Value time 


【示例 5】 可 以 使 用 下 列 代码 来 限定 时 间 。 


<form action="demo_form.php" method="get"> 

请 选择 或 输入 时 间 : <input type="time" name="timel" step="5" value="09: 00"> 
<input type="submit" /> 

</form> 


规定 默认 值 


以 使 用 min 和 max 属 


© localhost/tests html 人 |! 


请 选择 或 输入 时 间 ， 


请 人 择 或 答 和 时间 ，[cuunmX 中 


到 


提交 查询 内 容 ， 


图 12.26 正 10 不 支持 该 类 型 输入 框 图 12.27 使 用 属性 值 限定 时 间 类 型 


在 date 类 型 、month 类 型 、week 类 型 中 也 支持 使 用 上 述 属性 值 。 

5. datetime 类 型 

datetime 类 型 的 日 期 选择 器 用 于 选取 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 UTC 时 间 。 
【示例 6】 下 面 是 datetime 类 型 的 日 期 选择 器 的 应 用 示例 。 

<form action="demo_form.php" method="get"> 

请 选择 或 输入 时 间 : <input type="datetime" name="datetimel" /> 

<input type="submit" /> 

</form> 


以 上 代码 在 Safari 浏览 器 中 的 运行 结果 如 图 12.28 所 示 。 


CEL) CO memoc ©) Gr- co0ge 
请 选择 或 给 入 时 间 。[2017-07-01T03:037 图 


图 12.28 在 Safari 浏览 器 中 的 运行 结果 
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< 注意 : 正 、Firefox 和 Chrome 最 新 版 本 不 再 支持 <input type="datetime"> 元 素 ，Chrome 和 Safari 庆 列 
版 本 支持 。Operal2 以 及 更 早 的 版 本 则 完全 支持 。 


6. datetime-local 类 型 
datetime-local 类 型 的 日 期 选择 器 用 于 选取 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 本 地 时 间 。 
【示例 7】 下 面 是 datetime-local 类 型 的 日 期 选择 器 的 应 用 示例 。 
<form action="demo form.php" method="get"> 
请 选择 或 输入 时 间 : <input type="datetime-local" name="datetime-locall" /> 
<input type="submit" /> 
</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.29 所 示 ， 在 Opera 浏览 器 中 的 运行 结果 如 图 12. 30 | 
所 示 。 


:era x 二 


2077 年 1 月” 


图 12.29 在 Chrome 浏览 器 中 的 运行 结果 


12.8.6 ”定义 搜索 框 | 


search 类 型 的 input 元 素 提供 了 用 于 输入 搜索 关键 词 的 文本 框 。 在 外 观 上 看 起 来 ，search 类 型 的 input 元 
素 与 普通 的 text 类 型 的 区 别 在 于 : 当 输入 内 容 时 ， 右 侧 会 出 现 一 个 “x ” 按 扭 ， 单 击 即 可 清除 搜索 框 。 | 
【示例 】 搜 索 框 是 应 用 placeholder 的 最 佳 控件 。 同 时 ， 注 意 这 里 的 form 用 的 是 method="get"， 而 不 是 | 
method="post"。 这 是 搜索 字段 的 常规 做 法 ( 无 论 是 type="search"， 还 是 type="text" )。 | 
<form method="get" action="search-results.php" role="search"> 
<label for="search"> 请 输入 搜索 关键 词 : </label> 
<input type="search" id="search" name="search" size="30" placeholder=" 输入 的 关键 字 " /> 
<input type="submit" value=" Go " > 
</form> 


以 上 代码 在 Chrome ee 告 果 如 图 12.31 所 示 。 如 果 在 搜索 框 中 输入 要 搜索 的 关键 词 ， ti 
索 框 右 侧 就 会 出 现 一 个 “x ”按钮 。 单 击 该 按钮 可 以 清除 已 经 输入 的 内 容 。 

OSX 上 的 Chrome、 Sa 以 及 iOS 上 的 Mobile Safari 会 让 搜索 框 显示 为 圆 角 边框 ， i 
字段 右 侧 会 出 现 一 个 “x ”按钮 ， 用 于 清除 输入 的 内 容 。 新 版 的 正 、Chrome、Opera 浏览 器 支持 “ 
钮 这 一 功能 ， Firefox 浏览 几 则 不 业 持 ， 显示 为 常规 文本 框 的 样子 ， 如 图 12.32 所 示 。 


“39275 


xie 和 mv 开发 从 和 m 到 类 首 ( 微 课 精 编 版 ) 


€ 3 © [© ocanosytestLntm 


请 给 入 找 过 关键 词 : [aml 


图 12.31 search 类 型 的 input 元 素 示 例 图 12.32 Firefox 没 有 “x” 按钮 
党 提示 : 在 默认 情况 下 ， 为 Chrome、Safari 和 Mobile Safari 等 浏览 器 中 的 搜索 框 设置 样式 是 受到 限制 的 。 
如 果 要 消除 这 一 约束 ， 重 新 获得 CSS 的 控制 权 ， 可 以 使 用 专 有 的 -webkit-appearance: none; 
声明 ， 例 如 : 
input[type="search"] { 
-Webkit-appearance: none; 


} 


| 注意 ，appearance 属性 并 不 是 官方 的 CSS， 因 此 不 同 浏览 器 的 行为 有 可 能 不 一 样 。 更 多 信息 ( 包括 对 
| Firefox 的 支持 ) 可 以 参考 http: //css-tricks.com/almanac/properties/a/appearance/。 


12.8.7 定义 电话 号 码 杠 


| 
| tel 类 型 的 input 元 素 提供 专门 用 于 输入 电话 号 码 的 文本 框 。 它 并 不 限定 只 输入 数字 ， 因 为 很 多 的 电话 
| 号 码 还 包括 其 他 字符 ， 如 “ “)” 等 ， 如 86-0536-8888888。 

| 【示例 】 下 面 是 tel 类 型 的 input 元 素 的 应 用 示例 。 

| <form action="demo _form.php" method="get"> 

请 输入 电话 号 码 : <input type="tel" name="tell" /> 

<input type="submit' value=" 提交 "> 

</form> 


| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.33 所 示 。 从 某 种 程度 上 来 说 ， 所 有 的 浏览 器 都 支持 tel 
| 类 型 的 input 元 素 ， 因 为 它们 都 会 将 其 作为 一 个 普通 的 文本 框 来 显示 。HTML5 规则 并 不 需要 浏览 器 执行 任 
| 何 特定 的 电话 号 码 语法 或 以 任何 特别 的 方式 来 显示 电话 号 码 。 


€ 3 © |© localhost/testl.html 


请 输入 电话 号 码 : [ 


图 12.33 tel 类 型 的 input 元 素 示例 


| 12.8.8 ”定义 拾 色 器 


| color 类 型 的 input 元 素 提供 专门 用 于 选择 颜色 的 文本 框 。 当 color 类 型 的 文本 框 获取 焦点 后 ， 会 自动 调 


a 


【示例 】 下 面 是 color 类 型 的 input 元 素 的 应 用 示例 。 


<form action="demo _form.php" method="get"> 

请 选择 一 种 颜色 : <input type="color" name="colorl" /> 
<input type="submit" value=" 提交 "/> 

</form> 


| 
系统 的 颜色 窗口 ， 包 括 苹果 系统 也 能 弹出 相应 的 系统 色 盘 。 | 


以 上 代码 在 Opera 浏览 器 中 的 运行 结果 如 图 12.34 所 示 ， 单 击 颜色 文本 框 ， 会 打开 Windows 的 “颜色 ” | 

对 话 框 ， 如 图 12.35 所 示 ， 选 择 一 种 颜色 之 后 ， 单 击 “ 确 定 ”按钮 返回 网 页 ， 这 时 可 以 看 到 颜色 文本 框 显 示 | 
了 对 应 的 颜色 效果 ， 如 图 12.36 所 示 。 | 
| 

| 


党 提示 : IE 和 Safari 浏览 器 暂 不 支持 。 


] 
Blocalhosestihoml x 
+ + © 本 | 四 | iocahosytesnntm 


请 迄 择 一 种 颜色 ，| 用 到 昌 |[E 冯 | 


图 12.34 color 类 型 的 input 元 素 示 例 图 12.35 Windows 系统 中 的 “颜色 ”对 话 框 


localhostftostineml x 


tC tO Iocahoryiestlhtml 


请 迁 乓 一 种 阁 色 | 本 本 | 人 到 


图 12.36 设置 颜色 后 的 效果 


12.9 HTMLS 输入 属性 


HTMLS5 为 input 元 素 新 增 了 多 个 属性 ， 用 于 限制 输入 行为 或 格式 。 


12.9.1 定义 自动 完成 


autocomplete 属性 可 以 帮助 用 户 在 输入 框 中 实现 自动 完成 输入 。 取 值 包 括 on 和 of， 用 法 如 下 。 | 


“329's 
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| 党 提示 : autocomplete 属性 适用 的 input 元 素 的 类 型 包括 text、search、url、telephone、email、password、 
| Date Pickers、 range 和 color。 

autocomplete 属性 也 适用 于 form 元 素 ， 默 认 状 态 下 表单 的 autocomplete 属性 处 于 打开 状态 ， 其 包 
含 的 输入 域 会 自动 继承 autocomplete 状态 ， 也 可 以 为 某 个 输入 域 单 独 设置 autocomplete 状态 。 


| 

| 【示例 】 设 置 autocomplete 为 “on” 时 ， 可 以 使 用 HTMLS5 新 增 的 datalist 元 素 和 list 属性 提供 一 个 数 
| 据 列 表 供用 户 进行 选择 。 下 面 的 示例 演示 了 如 何 应 用 autocomplete 属性 、datalist 元 素 和 list 属性 实现 自动 
| 将 


<h2> 输入 你 最 喜欢 的 城市 名 称 </h2> 
| <form autocompelete="0n"> 

| <input type="text" id="city" list="cityList"> 

| <datalist id="cityList" style="display: none: "> 

| <option value="BeiJing">BeiJing</option> 

| <option Value="QingDao">QingDao</option> 
| <option value="QingZhou">QingZhou</option> 
| <option value="QingHai">QingHai</option> 

| </datalist> 

| </form> 

| 


| 在 浏览 器 中 预览 ， 当 用 户 将 焦点 定位 到 文本 框 中 ,会 自动 出 现 一 个 城市 列表 供用 户 选 择 ， 如 图 12.37 所 
| 示 。 而 当 用 户 点 击 页 面 的 其 他 位 置 时 ， 这 个 列表 就 会 消失 。 
| 当 用 户 输入 时 ， 该 列表 会 随 用 户 的 输入 自动 更 新 ， 例 如 ， 当 输入 字母 q 时 ， 会 自动 更 新 列表 ， 只 列 出 


| 以 q 开 头 的 城市 名 称 ， 如 图 12.38 所 示 。 随 着 用 户 不 断 地 输入 新 的 字母 ， 下 面 的 列表 还 会 随 之 变化 。 


D localhosytest2himl x WN 
€ 3 C [© localhost/test2html : € 3 © [© localhost/test2html 


输入 你 最 喜欢 的 城市 名 称 输入 你 最 喜欢 的 城市 名 称 


Qinghal 


图 12.37 “自动 完成 数据 列表 图 12.38 数据 列表 随 用 户 输入 而 更 新 

党 提示 : 多 数 浏览 器 都 带 有 辅助 用 户 完成 输入 的 自动 功能 ， 只 要 开启 了 该 功能 ， 浏 览 器 会 自动 记录 用 户 
所 输入 的 信息 ， 当 再 次 输入 相同 的 内 容 时 ， 浏 览 器 就 会 自动 完成 内 容 的 输入 。 从 安全 性 和 隐私 
的 角度 考虑 ， 这 个 功能 存在 较 大 的 隐患 ， 如 果 不 希 望 浏览 器 自动 记录 这 些 信 息 ， 则 可 以 为 form 
或 form 中 的 input 元 素 设 置 autocomplete 属性 ， 关 闭 该 功能 。 
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autofocus 属性 可 以 实现 在 页 面 加 载 时 ， 让 表单 控件 自动 获得 焦点 。 用 法 如 下 。 


<input type="text" name="fname" autofocus="autofocus" /> 


12.9.2 ”定义 自动 获取 焦点 


autocomplete 属性 适用 所 有 input 元 素 的 类 型 ， 如 文本 框 、 复 选 框 、 单 选 按钮 、 普 通 按钮 等 。 

| 

< 全 注意 : 在 同一 页 面 中 只 能 指定 一 个 autofocus 对 象 ， 当 页 面 中 的 表单 控件 比较 多 时 ， 建 议 为 最 需要 聚焦 | 
的 那个 控件 设置 autofocus 属性 值 ， 如 页 面 中 的 搜索 文本 框 ， 或 者 许可 协议 的 “同意 ”按钮 等 。 


<form> 
<p> 请 仔细 阅读 许可 协议 : </p> 
<p> 
<label for="textareal"></label> 
<textarea name="textareal" id="textareal" cols="45" rows="5"> 许可 协议 具体 内 容 .…..</textarea> 
</p> 
<p> 
<input type="submit" value=" 同意 " autofocus> 
<input type="submit" value=" 拒绝 "> 
</p> 
</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.39 所 示 。 页 面 载 入 后,“ 同意 ”按钮 自动 获得 焦 


因为 通常 希望 用 户 直接 单 击 该 按钮 。 如 果 将 “拒绝 ”按钮 的 autofocus 属性 值 设置 为 “on”"， 则 页 面 载 入 后 | 
点 就 会 在 “拒绝 ”按钮 上 ， 如 图 12.40 所 示 ， 但 从 页 面 功 用 的 角度 来 说 却 并 不 合适 。 | 


| 
| 
【示例 1】 下 面 的 示例 演示 了 如 何 应 用 autofocus 属性 。 | 
| 
| 


口 localhost/test1.html x ™—™ 

«30 : SE : 
请 仔细 阅读 许可 协议 ， 请 仔细 阅读 许可 协议 ， 
许可 协议 具体 内 容 许可 协议 具体 内 容 ， 


3 


图 12.39 “同意 ”按钮 自动 获得 焦点 图 12.40 “拒绝 ”按钮 自动 获得 焦点 


【示例 2】 如 果 浏 览 器 不 支持 autofocus 属性 ， 可 以 使 用 JavaScript 实现 相同 的 功能 。 在 下 面 的 脚本 中 ， | 
先 检测 浏览 器 是 否 支持 autofocus 属性 ， 如 果 不 支持 则 获取 指定 的 表单 域 ， 为 其 调用 focus0 方法 ， 强 迫 其 获 | 


<script> | 
if(!("autofocus" in document.createElement("input"))) { | 
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| 


| 京 
提 
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document.getElementById("ok").focus():; 


eR 
的 
</script> 


12.9.3 ”定义 所 属 表单 


form 属性 可 以 设置 表单 控件 归属 的 表单 。 适 用 于 所 有 input 元 素 的 类 型 。 


这 提 示 : 在 HTML4 中， 用户 必须 把 相关 的 控件 放 在 表单 内 部 ， 即 <form> 和 </form> 之 间 。 在 提交 表单 时 ， 


在 <form> 和 </form> 之 外 的 控件 将 被 忽略 。 


【示例 】form 属性 必须 引用 所 属 表单 的 i4， 如 果 一 个 form 属性 要 引用 两 个 或 两 个 以 上 的 表单 ， 则 需要 
| 使 用 空格 将 表单 的 id 值 分 隔 开 。 下 面 是 一 个 form 属性 应 用 。 


<form action="" method="get" id="forml"> 
请 输入 姓名 : <input type="text" name="namel" autofocus/> 


<input type="submit" 


</form> 
请 输入 住址 : <input type="text" name="addressl" form="form1" /> 


value=" 提交 "人 > 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.41 所 示 。 如 果 填 写 姓 名 和 住址 并 单 击 “提交 ”按钮 ， 


办 办 办 办 罗 


[Dlocalhost8080/mysite/ x WW 


€ 3 © |© localhost8080/mysite/te... 从 | 让 


| 则 namel 和 addressl 分 别 会 被 赋值 为 所 填写 的 值 。 例 如 ， 如 果 在 姓名 处 填写 “zhangsan”， 住 址 处 填写 “ 北 
”， 则 单 击 “提交 ”按钮 后 ， 服 务 器 端 会 接收 到 “namel=zhangsan” 和 “address1= 北京 "。 用 户 也 可 以 在 
交 后 观察 浏览 器 的 地 址 栏 ， 可 以 看 到 有 “namel=zhangsan&caddress1= 北京 ”的 字样 ， 如 图 12.42 所 示 。 


请 输入 姓名 : zhangsan 


[E 当 


请 输入 住址 : 


图 12.41 form 属性 的 应 用 图 12.42 地址 中 要 提交 的 数据 


定义 表单 重 写 


HIML5 新 增 了 5 个 表单 重 写 属性 ， 用 于 重 写 fomm 元 素 属性 设置 ， 简 单 说 明 如 下 。 


村 


formaction : 


写 form 元 素 的 action 属性 。 


formenctype: 重 写 form 元 素 的 enctype 属性 。 
formmethod: 重 写 form 元 素 的 method 属性 。 


formnovalidate: 


form 元 素 的 novalidate 属性 。 


也 form 元 素 的 target 属性 。 
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< 注意 : 表单 重 写 属性 仅 适用 于 submit 和 image 类 型 的 input 元 素 。 


但; 


【示例 】 下 面 的 示例 设计 了 通过 formaction 属性 ， 实 现 将 表单 提交 到 不 同 的 服务 器 页 面 。 


<form action="1.asp" id="testform"> 

请 输入 电子 邮件 地 址 : <input type="email" name="userid" /><br /> 
<input type="submit" value=" 提交 到 页 面 1" formaction="1.asp" 这 

<input type="submit" value=" 提交 到 页 面 2" formaction="2.asp" /> 

<input type="submit" value=" 提交 到 页 面 3" formaction="3.asp" /> 

</form> 


9.5 ”定义 高 和 宽 


height 和 width 属性 仅 用 于 设置 <input type="image"> 标签 的 图 像 高 度 和 宽度 。 
【示例 】 下 面 的 示例 演示 了 height 与 width 属性 的 应 用 。 

<form action="testform.asp" method="get"> 

请 输入 用 户 名 : <input type="text" name="user name" /><br /> 

<input type="image" src="images/submit.png" width="72" height="26" /> 

</form> 


源 图 像 的 大 小 为 288 像素 x 104 像素 ， 使 用 以 上 代码 将 其 大 小 限制 为 72 像素 x 267 像素 


浏览 器 中 的 运行 结果 如 图 12.43 所 示 。 


12. 


text、 


[9 localhost/test1.html  x NW 
€ 3 © [© localhost/testl.html 


请 输入 用 户 名 : 


图 12.43 ”form 属性 的 应 用 


9.6 定义 列表 选项 


， 在 Chrome 


list 属性 用 于 设置 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。 该 属性 适用 于 以 下 类 型 的 iput 元 素 : 


search、 url、 telephone、email、Date Pickers、number、range 和 color。 
演示 示例 可 参考 12.10.1 小 节 关 于 datalist 元 素 的 介绍 。 


<4 甸 注意 : 目前 最 新 的 主流 浏览 器 都 已 支持 list 属性 ， 不 过 呈现 形式 略 有 不 同 。 


12. 


9.7 ”定义 最 小 值 、 最 大 值 和 步 长 


min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 输入 类 型 设置 限 值 ， 适 用 于 Date Pickers、number | 
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和 range 类 型 的 input 元 素 。 具 体 说 明 如 下 。 
回 max 属性 : 设置 输入 框 所 允许 的 最 大 值 。 
回 min 属性 : 设置 输入 框 所 允许 的 最 小 值 。 
回 step 属性 : 为 输入 框 设置 合法 的 数字 间隔 ( 步 长 )。 例 如 ，step="4"， 则 合法 值 包括 -4、0、4 等 。 
【示例 】 下 面 的 示例 设计 了 一 个 数字 输入 框 ， 并 规定 该 输入 框 接受 0~12 的 值 ， 且 数字 间隔 为 4。 
<form action="testform.asp" method="get"> 
请 输入 数值 : <input type="number" name="numberl" min="0" max="12" step="4" /> 
<input type="submit" value=" 提交 " /> 
</form> 


在 Chrome 浏览 器 中 运行 ， 如果 单 击 数字 输入 框 右 侧 的 微调 按钮 ， 则 可 以 看 到 数字 以 4 为 步 进 值 递 增 ， 


| 如 图 12.44 所 示 ; 如 果 输 入 不 合法 的 数值 ， 如 5， 单 击 “提交 ”按钮 时 会 显示 错误 提示 ， 如 图 12.45 所 示 。 


DD localhosytestlhtml x 


€ > © [© localhosthestlhiml 从 | © FC[Oahometihm lt 


请 栓 和 洲 年， 四 5 


请 输入 数值 ， NE 2 
旧 辣 折 入 有 次 佰 ， 两 个 最 接近 的 有 效 
全 分 别 为 4fn8， 


图 12.44 list 属性 应 用 图 12.45 显示 错误 提示 


12.9.8 定义 多 选 


multiple 属性 可 以 设置 输入 域 一 次 选择 多 个 值 。 适 用 于 email 和 file 类 型 的 input 元 素 。 
【示例 】 下 面 在 页 面 中 插入 一 个 文件 域 ， 使 用 multiple 属性 允许 用 户 一 次 可 提交 多 个 文件 。 
<form action="testform.asp" method="get"> 
请 选择 要 上 传 的 多 个 文件 : <input type="file" name="img" maultiple /> 
<input type="submit" value=" 提交 " /> 
</form> 


在 Chrome 浏览 器 中 的 运行 结果 如 图 12.46 所 示 。 如 果 单 击 “ 选 择 文件 ”按钮 ， 则 会 允许 在 打开 的 对 话 


框 中 选择 多 个 文件 。 选 择 文件 并 单 击 “ 打 开 ” 按 钮 后 会 关闭 对 话 框 ， 同 时 在 页 面 中 会 显示 选中 文件 的 个 数 ， 
如 图 12.47 所 示 。 


口 ecahorheshml x NN 
€ 3 © |© localhost/testl.html 食 | : 


€ 3 © |© localhost/testihiml 全 | : 


请 选择 要 上 和 传 的 多 个 文件 : 
选择 文 沂 4 个 文件 


请 选择 要 上 传 的 多 个 文件 : 
选择 文件 | 未 法 择 任何 文件 生 冯 


图 12.46 mnultiple 属性 的 应 用 图 12.47 显示 被 选中 文件 的 个 数 
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12.9.9 定义 匹配 模式 


pattern 属性 规定 用 于 验证 input 域 的 模式 ( pattern )。 模 式 就 是 JavaScript 正则 表达 式 ， 通 过 自 定 义 的 
正则 表达 式 匹 配 用 户 输入 的 内 容 ， 以 便 进行 验证 。 该 属性 适用 于 text、search 、url、telephone 、email 和 | 
password 类 型 的 input 元 素 。 
【示例 】 下 面 的 示例 使 用 了 patter 属性 设置 文本 框 必须 输入 6 位 数 的 邮政 编码 。 
<form action="/testform.asp" method="get"> 
请 输入 邮政 编码 : <input type="text" name="zip_code" pattemn="[0-9]{6}" 
title=" 请 输入 6 位 数 的 邮政 编码 " 亡 
<input type="submit" value=" 提交 " /> 
</form> 


在 Chrome 浏览 器 中 的 运行 结果 如 图 12.48 所 示 。 如 果 输 入 的 数字 不 是 6 位 ， 则 会 出 现 错误 提示 ， 如 图 
12.49 所 示 。 如 果 输 入 的 并 非 规定 的 数字 ， 而 是 字母 ， 也 会 出 现 这 样 的 错误 提示 ， 因 为 pattem="[0-9]{6}" 中 
规定 了 必须 输入 0~9 这 样 的 阿拉 伯 数 字 ， 并 且 必 须 为 6 位 数 。 | 

党 提示 : 读者 可 以 在 http: /html5pattern.com 上 面 找到 一 些 常用 的 正则 表达 式 ， 并 将 它们 复制 粘贴 到 自己 
的 pattern 属性 中 进行 应 用 。 


[DD localhost/testihtml x WN 
€ 3 © |@ localhost/testl.html 女 | : 


请 输入 邮政 编码 : CT |] 
提交 


DD localhost/testihtml x 
€ 3 CC |© localhost/testl.html 食 | : 


请 给 入 天 


回 请 与 所 请 求 的 格式 保持 一 致 
请 输入 6 位 数 的 邮政 篇 码 


图 12.48 ”pattern 属性 的 应 用 图 12.49 ”出 现 错误 提示 


12.9.10 ”定义 替换 文本 


placeholder 属性 用 于 为 nput 类 型 的 输入 框 提供 一 种 文本 提示 ， 这 些 提示 可 以 描述 输入 框 期 待 用 户 输 | 
入 的 内 容 ， 在 输入 框 为 空 时 显示 ， 而 当 输 入 框 获取 焦点 时 自动 消失 。placeholder 属性 适用 于 text、search 、| 
Wl、telephone 、email 和 password 类 型 的 input 元 素 。 | 
【示例 】 下 面 是 placeholder 属性 的 一 个 应 用 示例 。 请 注意 比较 本 例 与 上 例 提示 方法 的 不 同 。 


| 
| 
| 
| 
<form action="/testform.asp" method="get"> | 
| 
| 
| 


请 输入 邮政 编码 : 
<input type="text" name="zip_code" pattern="[0-9]{6}" 
placeholder=" 请 输入 6 位 数 的 邮政 编码 " /> 
<input type="submit" value=" 提交 "/> 
</form> | 
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| 消失 ， 如 图 12.51 所 示 。 


| 2 
口 localhosytestlshtn x mm 


人 is 的 zu 开发 从 和 到 本 和 ( 微 裸 精 编 版 ) 


“> © [© locahostieslniml | : 
Note 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.50 所 示 。 当 输入 框 获得 焦点 并 输入 字符 时 ， 提 示 文 字 


«> 0 [Ovonoemm #] ; 


提交 


</form> 


图 12.50 placeholder 属性 的 应 用 


在 Chrome 浏览 器 中 的 运行 结果 如 图 12.52 所 示 . 


请 输入 邮政 编码 : 车 答 入 6 后 孝 的 邮政 绩 梧 请 输入 邮政 编码 : 
提交 


| “请 填写 此 字段 ”的 提示 ， 只 有 输入 内 容 之 后 才 允 许 提交 表单 


DD localhosthesti htr x 


请 输入 姓名 : 


提交 


图 12.52 ”提示 “请 填写 此 字段 


EE 


图 12.51 提示 消失 


required 属性 用 于 定义 输入 框 填写 的 内 容 不 能 为 空 ， 否 则 不 允许 提交 表单 。 该 属性 适用 于 text、search 、 
url、telephone 、email 、password、Date Pickers 、number 、checkbox 、radio 和 file 类 型 的 input 元 素 。 
【示例 】 下 面 的 示例 使 用 了 required 属性 规定 文本 框 必须 输入 内 容 。 


<form action="/testform.asp" method="get"> 
请 输入 姓名 : <input type="text" name="usr_name" required="required" /> 
<input type="submit" value=" 提交 " /> 


当 输 入 框 内 容 为 空 并 单 击 “ 提 交 ” 按 钮 时 ,会 出 现 


12.10 HTMLS 新 表单 元 素 
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datalist 元 素 用 于 为 输入 框 提供 一 个 可 选 的 列表 ， 供 用 户 输入 匹配 或 直接 选择 。 如 果 不 想 从 列表 中 选择 ， 
也 可 以 自行 输入 内 容 。 
datalist 元 素 需 要 与 option 元 素 配合 使 用 ， 每 一 个 option 选项 都 必须 设置 value 属性 值 。 其 中 datalist 元 | 
素 用 于 定义 列表 框 ，option 元 素 用 于 定义 列表 项 。 如 果 要 把 datalist 提供 的 列表 绑 定 到 某 输入 框 上 ， 还 需要 | 
使 用 输入 框 的 list 属性 来 引用 datalist 元 素 的 id。 

【示例 】 下 面 的 示例 演示 了 datalist 元 素 和 list 属性 如 何 配合 使 用 。 


| 
| 
| 
| 
<form action="testform.asp" method="get"> | 
| 
| 
| 
| 


12.10.1 定义 数据 列表 


请 输入 网 址 : <input type="url" list="url list" name="weblink" /> 

<datalist id="url list"> 
<option label=" 新 浪 " value="http: //www.sina.com.cn" /> 
<option label=" 搜狐 " value="http: //www.sohu.com" 人 > 
<option label=" 网 易 " value="http: //www.163.com" /> 

</datalist> 

<input type="submit" value=" 提交 " /> 

</form> 


| 
| 
| 
在 Chrome 浏览 器 中 运行 ， 当 用 户 单 击 输入 框 之 后 ， 就 会 弹出 一 个 下 拉 网 址 列表 ， 供 用 户 选择 ， 效果 如 
图 12.53 所 示 。 | 

| 

| 


[DD localhosthestihtml x 
€ 3 GG |O© localhost/testl.html 


请 福 A 风 [| 


httpy/www sina_comcn 条 浪 


httpy//www.163.com R | 


图 12.53 list 属性 应 用 


12.10.2 ”定义 密 钥 对 生成 器 


keygen 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方 法 。 
作为 密 Sa 当 提 交 表单 时 ，keygen 元 素 会 生成 两 个 键 : 私 钥 和 公 钥 。 私 钥 存储 于 客户 端 ; 公 钥 | 
被 发 送 到 服务 器 ， 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 。 
目前 ， 浏 览 器 对 该 元 素 的 支持 不 是 很 理想 。 
【示例 】 下 面 是 keygen 元 素 的 一 个 应 用 示例 。 
<form action="/testform.asp" method="get"> 
请 输入 用 户 名 : <input type="text" name="usr_ name" /><br> 
请 选择 加 密 强度 : <keygen name="security" /><br> 
<input type="submit" value=" 提交 " 广 
</form> 
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以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.54 所 示 。 在 “请 选择 加 密 强 度 ” 右 侧 的 keygen 元 素 
P 可 以 选择 一 种 密 钥 强度 ， 有 2048 ( 高 强度 ) 和 1024 ( 中 等 强度 ) 两 种 ，Firefox 浏览 器 也 提供 两 种 选项 ， 


| 如 图 12.55 所 示 。 


DD localhosthestintn x WN 


© 3 C |©locahosttestihtml 全 | $ 


图 12.54 ”Chrome 浏览 器 提供 的 密 钥 等 级 图 12.55 Firefox 浏览 器 提供 的 密 钥 等 级 


12.10.3 ”定义 输出 结果 


output 元 素 用 于 在 浏览 器 中 显示 计算 结果 或 脚本 输出 ， 其 语法 如 下 。 
<output name="">Text</output> 


【示例 】 下 面 是 output 元 素 的 一 个 应 用 示例 。 该 示例 计算 用 户 输入 的 两 个 数字 的 乘积 。 
<script type="text/javascript"> 
function multiO{ 
a=parseInt(prompt(" 请 输入 第 1 个 数字 。", 0)); 
b=parseInt(prompt(" 请 输入 第 2 个 数字 。", 0)); 
document.forms["form"]["result"].value=a*b:; 


y 


</script> 


<body onload="mnulti0"> 

<form action="testform.asp" method="get" name="form"> 
两 数 的 乘积 为 : <output name="result"></output> 

</form> 

</body> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 12.56 和 图 12.57 所 示 。 当 页 面 载 和 时， 会 首先 提示 “请 


| 输入 第 1 个 数字 ”"， 输 入 并 单 击 “ 确 定 ” 按 钮 后 再 根据 提示 输入 第 2 个 数字 。 再 次 单 击 “确定 ”按钮 后 ， 显 


| 示 计 算 结果 ， 如 图 12.58 所 示 。 


四 - -有 四 - -ED 
/J lccalhosthiesti html  xNEED 
© FX |@Iocalhosttestlhtml 全 | 让 六 X |© localhost/testl.html 
localhost 显示 : 和 localhost 昌 示 : 
天 入 11 数 字 . 入 生 2 个 数字 . 
四 加 
口 村 止 此 世 再 呈 示 后 话 征 ， DD see 
[ 权 ][ 对 EI 
图 12.56 提示 输入 第 1 个 数字 图 12.57 提示 输入 第 2 个 数字 
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两 数 的 乘积 为 : 1836 


图 12.58 显示 计算 结果 


12.11 HTMLS 表单 属性 


HTML5 为 form 元 素 新 增 了 两 个 属性 : autocomplete 和 novalidate， 下 面 分 别 进行 说 明 。 


12.11.1 定义 自动 完成 


| 
autocomplete 属性 用 于 规定 form 中 所 有 元 素 都 拥有 自动 完成 功能 。 该 属性 在 介绍 input 属性 时 已 经 介绍 | 
过 ， 用 法 与 之 相同 。 | 
但 是 当 autocomplete 属性 用 于 整个 form 时 ， 所 有 从 属于 该 form 的 控件 都 具备 自动 完成 功能 。 如 果 要 | 
关闭 部 分 控件 的 自动 完成 功能 ， 则 需要 单独 设置 autocomplete="off"， 具 体 示例 可 参考 autocomplete 属性 的 | 
介绍 。 | 
| 


12.11.2 ”定义 禁止 验证 


novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 适 用 于 form 元 素 ， 以 及 text、search、| 
telephone 、email 、password 、Date Pickers 、range 和 color 类 型 的 input 元 素 。 
【示例 1】 下 面 的 示例 使 用 novalidate 属性 取消 了 整个 表单 的 验证 。 


| 
| 
| 
| 
| 
| 
| 
<form action="testform.asp" method="get" novalidate> | 
| 
| 
| 
| 
| 
| 


Wl、 


请 输入 电子 邮件 地 址 : <input type="email" name="user_email" /> 
<input type="submit" value=" 提交 "/> 
</form> 


【补充 】 
HIML5 为 form、input、select 和 textarea 元 素 定 义 了 一 个 checkValidity0 方法 。 调 用 该 方法 ， 可 以 显 式 | 
地 对 表单 内 所 有 元 素 内 容 或 单个 元 素 内 容 进行 有 效 性 验证 。checkValidity0 方法 将 返回 布尔 值 ， 以 提示 是 否 | 
通过 验证 。 | 
【示例 2】 下 面 的 示例 使 用 checkValidity0 方法 ， 主 动 验证 用 户 输 入 的 E-mail 地 址 是 否 有 效 。 
<script> 
function checkO{ 
Var email = document.getElementById("email"): 
if(email.value—""){ 
alert(" 请 输入 E-mail 地 址 "): 
Teturn false: 
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| 

| 

| 

) 

| else if(!email.checkValidityO){ 
alert(" 请 输入 正确 的 E-mail 地 址 "): 
| Teturn false: 

| 


} 


else 


alert(" 您 输入 的 E-mail 地 址 有 效 "); 
</script> 


<form id=testform onsubmit="return check(); " novalidate> 
<label for=email>Email</label> 
<input name=email id=email type=email /><br/> 
<input type=submit> 

</form> 


次 提示 : 在 HIML5 中 ，form 和 input 元 素 都 有 一 个 validity 属性 ， 该 属性 返回 一 个 ValidityState 对 象 。 


该 对 象 具 有 很 多 属性 ， 其 中 最 简单 、 最 重要 的 属性 为 valid 属性 ， 它 表示 表单 内 所 有 元 素 内 容 
是 否 有 效 或 单个 input 元 素 内 容 是 否 有 效 。 


12.12 ”案例 实战 


本 节 将 以 案例 的 形式 练习 HIML5 表单 控件 的 制作 方法 ， 从 而 设计 各 种 形式 的 表单 页 面 。 


12.12.1 设计 注册 表单 


本 节 示 例 模拟 手机 麦 包 包 网 的 用 户 注册 网 页 ， 浏 览 效 果 如 图 12.59 所 示 。 


| 

| = 用 户 注册 全 
| 

| Fs: | 

wh 

| Em: | | 
| 

ET 

| 邮箱 主 册 >> 

| 


图 12.59 设计 用 户 注册 页 面 效果 
| 首先 , 我们 看 一 下 页 面 的 表单 结构 ， 代 码 如 下 。 
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<section class="modBaseBox"> 
<form action="#" method="post" style="margin: 0: padding: 0: "> 
<input type="hidden" name="sendURL" id="sendURL" value="/index.html" /> 
<div class="modBd"> 
<ul class="formLogin"> | 
<li><label for="regMobile"> 手 机 号 码 : </label><span><input type="text" name="mobile" id="mobile” | 
value="" /> </span> </l> 
<li><label for="regPwd"> 密码 : </label><span><input type="password" name="password" id= 
"password" /></span> </li> 
<li><label for="regRepPwd"> 确 认 密 码 : </label><span><input type="password" 
name="confirmPassword" id="confirmPassword" /></span> </li> 
<li><label for="regRepPwd"> 验证 码 : </label><span><input type="text" name="verificationCode" 
id="verificationCode" /></span> </li> | 
<li><span> <img src="images/picCode.jpge" alt="" height="24" id="verificationImage" name= 
"verificationImage" /> | 
<input type="button" class="modBtnWhite" style="margin-left: 10px"name="changeVerCode" id= 
"changeVerCode" value=" 换 一 张 " /></span> </li> 


<lub> | 
<div class="btnLoginBox"> | 
<input type="submit" class="modBtnColor colorBlue" style="padding: 0 80px" value=" 注 册 "/><p><ahre 仁 | 

"#" class="register"> 邮箱 注册 &gt: &gt </a></p> | 

</div> | 
</div> | 
</form> 
</section> | 


然后 ， 在 main.css 样式 表 文件 中 找到 下 面 的 表单 样式 。 具 体 分 析 如 下 。 | 
第 1 步 , 统一 表单 列表 框 基本 样式 。 | 
.frameLoginBox .formLogin { padding: 8px 0 15px: text-align: center } 
第 2 步 ， 定义 每 个 表单 对 象 行内 块 显示 ， 宽 度 100%。 | 
‘frameLoginBox .formLogin li { width: 100%:; display: inline-block: padding: Spx: box-sizing: border-box: } | 

|! 
第 3 步 , 设计 表单 控件 的 标签 文本 样式 : 固定 宽度 、 左 对 齐 、 行 内 块 显示 。 | 


.frameLoginBox .formLogin label { width: 70px: text-align: left: display: inline-block } 
.frameLoginBox .formLogin span { display: inline-block } 


撑 开 输入 框 ， 固 定 宽度 为 180 像素 。 


| 
| 
| 
第 4 步 ， 设 计 输 入 框 样式 ， 固 定 高 度 ， 行 高 等 于 高 度 ， 实 现 垂直 居中 ， 加 上 浅 色 边 框 ， 增 加 padding，| 
.frameLoginBox .formLogin input { height: 24px: line-height: 24px: border: 1px solid #8badc2: padding: 2px 4px: width: | 
180px } | 


第 5 步 , 设计 “ 换 一 张 ”按钮 样式 ,渐变 阴影 外 加 投影 。 


.modBtnWhite { display: inline-block: background: linear-gradient(to bottom. #f5f5f5. #e6e6e6): height: 22px: line- | 
height: 22px; padding: 0 15px: text-align: center: border: 1px solid #bdbdbd: box-shadow: 0 1px 2px #ccc:; } | 
| 


第 6 步 ， 设 计 提交 按钮 居中 显示 。 | 


.341。 


HWMss 各 妈 Wet 开发 以 入 门 到 将 大 ( 稚 课 靖 关 县 ) 
< 


-frameLoginBox .btnLoginBox { padding: 15px 0 10px: text-align: center } 


第 7 步 ， 设 计 按钮 行内 块 显示 ， 固 定 高 度 ， 行 高 等 于 高 度 ， 实 现 垂直 居中 ， 加 上 渐变 阴影 和 投影 特效 。 
.modBtnColor { display: inline-block: height: 30px: line-height: 30px: padding: 0 15pX: text-align: center: color: #fff: 
border-radius: 2px: box-shadow: 0 1px 3px #444: } 

| 【拓展 练习 】 

| 下 面 示例 以 本 节 演 示 示 例 为 基础 ， 模 拟 易 购 网 的 个 性 化 用 户 注册 网 页 ， 效 果 如 图 12.60 所 示 。 详 细 代码 
| 请 参考 本 节 示 例 源 代码 目录 下 的 “拓展 练习 ”文件 夹 。 


用 户 注册 
姓名 : 


姓名 
Email : 
emall@example.com 
网 址 : 
http://www.example.com 
年 擒 ; 


图 12.60 设计 注册 页 面 


12.12.2 设计 登录 表单 


本 节 示 例 模拟 同 程 旅游 无 线 网 的 会 员 登 录 网 页 ， 浏 览 效果 如 图 12.61 所 示 。 


只 请 给 入 您 的 手机 号 


合 室友 (5-18 位 数 子 和 字母 坦言 》 


图 12.61 设计 用 户 登 录 页 面 效果 
首先 ,我们 看 一 下 页 面 的 表单 结构 ， 代 码 如 下 。 
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<div class="content" page="login" style="padding: 10px: "> 
<form action="#" class="listForm" method="post"> 

<article class="circle_b bottom c" id="payInfo"> 

<section class="secure" id="selectBank"> <span class="username"></span> <span class="fRight"> | 

<input class="0pa" name= "LoginName' id- name" placeholder=" 请 输入 您 的 手机 号 "type="text" value=" 户 | 

</span> | 

</section> ! 

<section class="dash _b"> <span class="password"></span> <span class="fRight"> | 

<input class="opa" name="Passwd" id="pass" placeholder=" 密码 (6-18 位 数字 和 字母 组 合 )" type= | 

"password" /> | 


</span> | 
</section> | 
</article> 
<div class="col_div"> | 
<button type="submit" class="btn btn-blue" title=" 会 员 登 录 "> 登录 </button> | 
</div> 
</form> 
</div> 


= 9 » | 
下 面 是 表单 样式 代码 ， 简 单 说 明 如 下 。 | 
第 1 步 , 统一 定义 表单 对 象 样式 。100% 宽度 显示 ， 取 消 轮 廓 线 、 边 框 线 和 阴影 。 | 
article.bottom_c input[type="text"], article.bottom_c input[type="password"] { width: 100%; text-align: left; outline: | 
none; box-shadow: none; border: none; color: #333; background-color: #fff; height: 20px; margin-left: -Spx; font- | 
family: microsoft yahei; } | 
| 


第 2 步 ， 定义 表单 对 象 外 框 样式 ， 添 加 底 边 框 线 效果 。 
#selectBank { border-bottom: 1px solid #ccc: } 

section span { float: left; padding-left: 5px } 

第 3 步 ， 为 替换 文本 添加 样式 。 设 置 字体 颜色 为 浅 灰色 


input: : -webkit-input-placeholder { 
color: #ccc; 


} 

第 4 步 , 设置 表单 对 象 包含 元 素 span 的 样式 。 

section span.fRight { float: none: padding-left: 12px: position: relative: overflow: hidden: display: block: height: 44px; | 
line-height: 44px: } | 
第 5 步 ， 分 别 为 用 户 名 和 密码 框 左 侧 定义 一 个 图 标 。 | 
.username { background: url("../images/ico-user.png") no-repeat: display: inline-block; width: 25px; height: 25px: | 
background-size: cover: margin: 6px -Spx 0: } | 


.password { background: url("../images/ico-password.png") no-repeat: display: inline-block: width: 25px: height: 26px 
!important: height: 25px: background-size: cover: margin: 6px -5px 0: } 


第 6 步 , 设计 按钮 风格 样式 。 


-btn-blue { margin-top: 10px:; background: #fe932b: border none: border-radius: 3px; font-family: microsoft yahei; font- 
size: 18px: } 
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第 7 步 ， 设 计 按钮 基本 样式 。 


.btn { width: 10096: height: 40px: display: block: line-height: 40px: text-align: center: font-size: 18px: color: #fff: margin- 
bottom: 10px: } 


【拓展 练习 ] 
下 面 示例 以 本 节 演 示 示例 为 基础 模拟 掌 上 1 号 店 的 用 户 登录 网 页 ， 设 计 一 个 类 似 的 登录 表单 页 面 
效果 如 图 12.62 所 示 。 详 细 代 码 请 参考 本 节 示例 源 代码 目录 下 的 “拓展 练习 ”文件 夹 。 


用 户 登录 


| 
| 
| 
| 
| 
| 
| 全 号 : 手机 号 /邮箱 /用 户 名 
| 

| 


12.12.3 ”设计 反馈 表单 


| 
| 图 12.62 设计 登录 页 面 
| 
| 
| 
| 


| 
本 节 示 例 模拟 去 哪儿 网 的 意见 反馈 网 页 ， 浏 览 效 果 如 图 12.63 所 示 。 


意见 反馈 给 我 们 
请 输入 您 的 意见 ，500 字 以 内 ] 


手机 号 码 
请 输入 您 的 手机 号 码 | 


| 

| 

| 

| 

| 

| 

| 

| 

| 

| | 
验证 码 字 生字 7| 
| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


Qunar 京 ICP 备 05021087 ”意见 反馈 


图 12.63 设计 用 户 反馈 表单 
首先 ， 我 们 看 一 下 页 面 的 表单 结构 ， 代 码 如 下 。 


<form action="" method="post" id="fb"> 
<div class="qn_ pal0 qn_lh"> <span> 意见 反馈 给 我 们 </span> 
<textarea name="content" placeholder=" 请 输入 您 的 意见 . 500 字 以 内 " maxlength="500"></textarea> 
<span> 手机 号 码 </span> 
<input type="tel" name="mobile" placeholder=" 请 输入 您 的 手机 号 码 " maxl ="11" value="" /> 
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</div> 
<div class=" qn pal0"> 
<div class="qn item qn_ border"> 
<div class="qn_fl"> <span> 验证 码 </span> </div> 
<div class="qn_ml90"> 
<input name="code" placeholder=" 字母 或 数字 " value="" style="width: 118px: " /> 
<img class="qn_captcha" src="images/image.jpe" /> 
</div> 
</div> 
</div> 
<div class="qn_btn qn_plr10"> <a id="searchSubmit"> 提交 </a> </div> 
<input type="hidden" name="action" value="post" /> | 
</form> | 


打开 main.css 样式 表 文 件 ， 找 到 下 面 的 样式 代码 ， 下 面 简单 分 析 一 下 表单 对 象 的 样式 设计 思路 和 方法 。 | 
第 1 步 ， 统 一 文本 框 和 文本 区 域 的 基本 样式 ， 并 添加 浅 灰色 边框 和 内 补 白 。 


.qn_pal0 input, .qn_pal0 textarea { padding: 2px 4px: border: solid 1px #bbb: width: 97%; } 
.qn_lh { line-height: 1.5: } 


第 2 步 , 设计 验证 码 样式 。 

.qn_item { font-size: 16px: line-height: 40px: height: 40px; padding: 0 5px: background: #fff; } 

.qn_item.hover { background: #e0e0e0: color: #fff: } 

.qn_item input { height: 30px; width: 95%; border: none; font-size: 16px; } 

.qn_border { border: 1px solid #cacaca; } | 

.qn_fl { float: left: } | 

.qn_ml90 { margin-left: 60px } | 

.qn_ml90 input { display: inline-block: } | 

.qn_captcha { height: 35SpX: vertical-align: top; width: 105px; } | 

.qn_captcha { margin: 2px 000} | 
| 


第 3 步 , 设计 意见 反馈 文本 区 域 样式 | 
.qn_plr10 { padding-left: 10px: padding-right: 10px: } 
第 4 步 ， 设计 提交 按钮 样式 ,通过 渐变 背景 定义 立体 、 动 态 按钮 效果 。 | 


| 

| 
.qn_btn a { display: block; font-size: 18px; line-height: 40px; text-align: center; color: #fff; background: -webkit- | 
gradient ( linear, 0% 0. 0% 100%, from ( #ffa442 ) . to ( #ff801a )); background: linear-gradient ( to bottom, #ffa442. | 
#ff801a ); border-radius: 4px; margin-top: 6px; } | 
.qn_btn a: hover { background: -webkit-eradient(linear. 0% 0. 0% 100%, from(#e86800), to(#ff8400)): background: | 
linear-gradient(to bottom., #e86800. #ff8400): } | 
.qn_btn a: visited { color: #ffF: } | 


【拓展 练习 ] 
下 面 示例 以 本 节 演 示 示 例 为 基础 ， 模 拟 手机 搜狐 网 的 留言 反馈 网 页 ， 效 果 如 图 12.64 所 示 。 详 细 代码 请 | 
参考 本 节 示例 源 代码 目录 下 的 “拓展 练习 ”文件 夹 。 | 
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人 [7HMss 各 动 Wet 开发 及 入门 到 将 胡 ( 蕉 课 靖 病 县 ) 


+ 


您 的 手机 号 : 


请 将 您 的 反馈 意见 和 建议 告诉 我 们 ! 
请 输入 建议 内 容 . - 


彩 版 ” 触 版 PC 版 客户 端 
留言 -合作 


Copyright © 2018 Sohucom 


图 12.64 设计 反馈 页 面 


12.13 在 线 练习 
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设计 响应 式 表 格 


( 鳃 0 视频 讲解 : 35 分 钟 ) 


表格 是 网 站 必 不 可 少 的 功能 。 淘 宝 网 中 的 “我 的 订单 " 页面， 使 用 的 就 是 表格 技术 。 
在 响应 式 网 站 中 ， 响 应 式 表格 的 实现 方法 也 有 很 多 。 本 章 将 介绍 HIMLS 的 table 元 素 
及 其 于 元 素 ， 重 点 是 基本 的 table 结构 和 样式 。 


【学 习 重 点 】 

| 结构 化 表格 。 

I 设置 表格 属性 。 
DI 设置 单元 格 属 性 。 


eic 各 帮 zik 开 直 信 入门 到 精通 ( 稚 课 靖 全 及 ) 


起 
| 
| 
| 
13.1 认识 表格 结构 
Ea 


a 基本 的 表格 结构 主要 用 到 下 面 几 个 元 素 。 
| 回 table: 定义 表格 。 
| 回 也 : 定义 表格 的 标题 栏 。 
| 回 tr: 定义 表格 的 行 。 
| 回 td: 定义 表格 的 单元 格 。 
| 从 基本 结构 分 析 , table 元 素 是 由 行 组 成 的 ， 行 又 是 由 单元 格 组 成 的 。 每 行 (tr ) 都 包含 标题 单元 格 (也 ) 
| 或 数据 单元 格 (td )， 或 者 同时 包含 这 两 种 单元 格 。 
| 如 果 要 创建 复杂 的 表格 ， 还 需要 用 到 下 面 几 个 逻辑 结构 元 素 。 
| caption: 定义 表格 标题 。 
| thead: 定义 表格 页 眉 。 
| tbody: 定义 表格 主体 。 
tfoot: 定义 表格 页 脚 。 
col: 用 来 给 表格 中 的 一 列 或 者 多 列 设置 属性 。 
| colgroup: 用 来 表示 表格 的 列 组 ， 更 方便 地 给 表格 设置 列 样式 。 
| 正确 使 用 表格 的 逻辑 元 素 ， 会 让 表格 可 读 性 更 强 ， 设 置 样式 时 也 更 加 方便 。 
| 注意 ,使 用 col 和 clogroup 元 素 需 要 注意 以 下 两 点 。 
| 回 col 用 来 为 表格 中 的 一 列 或 者 多 列 设置 属性 ，span 属性 用 来 控制 列 数 。col 只 能 在 table 元 素 或 者 
colgroup 元 素 内 部 使 用 。 
| 回 clogroup 元 素 的 唯一 作用 是 存放 col 元 素 。 
| 为 整个 表格 添加 一 个 标题 ( caption ) 有 助 于 访问 者 理解 该 表格 。 在 浏览 器 中 ， 标 题 通常 显示 在 表格 上 
方 。 使 用 scope 属性 可 以 告诉 屏幕 阅读 器 和 其 他 辅助 设备 当前 的 也 是 列 的 标题 单元 格 ( scope="col" ) 还 是 
| 行 的 标题 单元 格 ( scope="row" )， 或 是 用 于 其 他 目的 的 单元 格 。 
在 默认 情况 下 ， 表 格 在 浏览 器 中 呈现 的 宽度 是 其 中 的 信息 在 页 面 可 用 空间 里 所 需要 的 最 小 宽度 。 可 以 
| 通过 CSS 改变 表格 的 格式 。 
如 果 每 行 也 有 标题 单元 格 ， 就 很 容易 理解 。 添 加 这 些 单元 格 只 需要 在 每 行 开头 添加 一 个 也 元 素 就 可 以 
| 了 。 列 标题 应 设置 scope="col"， 而 每 个 行 的 也 (位 于 td 之 前 ) 则 应 设置 scope="row"。 
【示例 】 下 面 的 示例 使 用 了 各 种 表格 元 素 设 计 一 个 符合 标准 的 表格 结构 。 
<table> 
<caption> 符合 标准 的 表格 结构 </caption> 
<tr> 
<th> 标题 1</th> 
<th> 标题 2</th> 
</t> 
<tr> 
<td> 数据 1</td> 
<td> 数据 2</td> 
</> 


罗 办 办 办 办 加 
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这 是 个 很 简单 的 表格 ， 它 只 有 一 个 包含 标题 单元 格 (也 元 素 ) 的 行 和 三 个 包含 数据 单元 格 (td 元 素 ) | 
的 行 。 每 行 都 是 由 tr 元素 标记 。 本 例 也 包含 了 caption 元 素 ， 不 过 它 是 可 选 的 。 


13.2 ”新建 表 格 


视频 讲 


解 
表格 有 多 种 形式 ， 如 简单 的 表格 、 带 标题 的 表格 、 结 构 化 的 表格 、 列 分 组 的 表格 等 ， 本 节 将 介绍 这 些 | 
不 同形 式 的 表格 的 设计 方法 。 | 


13.2.1 定义 普通 表格 


使 用 table 元 素 可 以 定义 HIML 表格 。 简 单 的 HTML 表格 由 一 个 table 元 素 ， 以 及 一 个 或 多 个 tt 和 td | 
元 素 组 成 ,其 中 tr 元 素 定 义 表格 行 ，td 元 素 定义 表格 的 单元 格 。 | 
【示例 】 下 面 的 示例 设计 了 一 个 简单 的 HTML 表格 ,包含 两 行 两 列 ， 演 示 效 果 如 图 13.1 所 示 。 


<table> 
<tr> 
<td> 月 落 乌 啼 霜 满 天 , </td> 
<td> 江枫 渔 火 对 悉 眼 。</td> 
</tr> 
<t> 
<td> 姑 苏 城 外 寒山 寺 , </td> 
<td> 夜半 钟 声 到 客船 。</td> 
</tr> 
</table> 


© Erg | 


月 落 握 嘛 霜 满 无 ， 江 枫 多 火 对 秋 限 。 
姑 苏 城 外 寒山 寺 ， 夜半 钟 声 到 客船 。 


图 13.1 设计 简单 的 表格 


13.2.2 ”定义 列 标题 
在 数据 表格 中 ， 每 列 可 以 包含 一 个 标题 ， 这 在 数据 库 中 被 称 为 字段 ， 在 HTML 中 被 称 为 表 头 单元 格 。 
使 用 也 元 素 定义 表 头 单元 格 。 


党 提示 : HTML 表格 中 有 以 下 两 种 类 型 的 单元 格 。 
回 表 头 单元 格 : 包含 表 头 信息 ， 由 也 元 素 创 建 。 
回 标准 单元 格 : 包含 数据 ， 由 纪元 素 创建 。 


在 默认 状态 下 ,也 元 素 内 部 的 文本 呈现 为 居中 、 粗 体 显示 ， 而 td 元 素 内 通常 是 左 对 齐 的 普通 文本 。 | 
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a {7cs 各 动 Hit 硬 必 从 入 站 到 靖 胡 ( 艇 久 糙 久 有 ) 


| 
> 
| 
| 【示例 1】 下 面 的 示例 设计 了 一 个 含有 表 头 信息 的 HIML 表格 ,包含 两 行 两 列 ， 演 示 效 果 如 图 13.2 
| 所 示 。 
| <table> 
| b> 
<th> 用 户 名 </th><th> 电子 邮箱 </th> 
</tr> 
<tr> 
<td> 张 三 </td><td>zhangsan@163.com</td> 
</t> 
</table> 


表 头 单元 格 一 般 位 于 表格 的 第 一 行 ， 当 然 用 户 可 以 根据 需要 把 表 头 单元 格 放 在 表格 中 任意 位 置 ， 例 如 ， 
| 第 一 行 或 最 后 一 行 ， 第 一 列 或 最 后 一 列 等 。 也 可 以 定义 多 重 表 头 。 

| 【示例 2】 下面 的 示例 设计 了 一 个 简单 的 课程 表 ， 表 格 中 包含 行 标题 和 列 标题 ， 即 表格 被 定义 了 两 类 表 
| 头 单元 格 ， 演 示 效 果 如 图 13.3 所 示 。 


| <table> 

| <tr> 

| <th>&nbsp; </th> 

| <th> 星期 一 </th><th> 星期 二 </th><th> 星期 三 </th><th> 星期 四 </th><th> 星期 五 </th> 
| </tr> 
| 

| 

| 

| 

| 


<th> 第 1 节 </th> 
<td> 语文 </td><td> 物理 </td> <td> 数学 </td><td> 语文 </td> <td> 美术 </td> 
</tr> 
<tr> 

<th> 第 2 节 </th> 

<td> 数学 </td><td> 语文 </td> <td> 体育 </td> <td> 英语 </td><td> 音乐 </td> 
</tr> 


<th> 第 3 节 </th> 

<td> 语文 </td><td> 体育 </td><td> 数学 </td><td> 英语 </td><td> 地 理 </td> 
</tr> 
<tr> 

<th> 第 4 节 </th> 

<td> 地 理 </td><td> 化 学 </td> <td> 语文 </td><td> 语文 </td><td> 美术 </td> 
</tr> 

</table> 


TT 


Se 
用 户 名 ”电子 邮箱 


张 三 zhangsan@163.com 


| 图 13.2 设计 带 有 表 头 的 表格 图 13.3 设计 双 表 头 的 表格 
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有 时 为 了 方便 浏览 ， 用 户 需要 为 表格 添加 一 个 标题 。 使 用 caption 元 素 可 以 定义 表格 标题 。 

注意 ， 须 紧 随 table 元 素 之 后 ， 只 能 对 每 个 表格 定义 一 个 标题 。 

【示例 】 以 上 节 示 例 1 为 基础 本 示例 在 上 合 表格 的 基础 上 添加 一 个 标题 ， 演 示 效 果 如 图 13.4 所 示 。 。 晤 T 末 

<table> 
<caption> 通讯 录 </caption> 
<tr> 


13.2.3 ”定义 表格 标题 


| 
| 
| 
| 
<th> 用 户 名 </th> | 
<th> 电子 邮箱 </th> | 
</tr> | 
<tr> | 
<td> 张 三 </td> | 
<td>zhangsan@163.com</td> 

</tr> 

</table> 


Ba -SB htp://ocalho. ~- SO 


图 13.4 设计 带 有 标题 的 表格 
从 图 13.5 可 以 看 到 ， 在 默认 状态 下 这 个 标题 位 于 表格 上 面 居 中 显示 。 


将 提示 : 在 HIML4 中 ， 可 以 使 用 align 属性 设置 标题 的 对 齐 方式 ， 取 值 包括 left、right、top、bottom。 | 
在 HTMLS5 中 已 不 赞成 使 用 ， 建 议 使 用 CSS 样式 取而代之 。 | 


13.2.4 ”表格 行 分 组 


thead 、tfoot 和 tbody 元 素 可 以 对 表格 中 的 行进 行 分 组 。 当 创建 表格 时 ， 如 果 和 希望 拥有 一 个 标题 行 , 一 | 
些 带 有 数据 的 行 ， 以 及 位 于 底部 的 一 个 总 计 行 ， 这 样 可 以 设计 独立 于 表格 标题 和 页 脚 的 表格 正文 滚动 。 当 | 
长 的 表格 被 打印 时 ， 表 格 的 表 头 和 页 脚 可 被 打印 在 包含 表格 数据 的 每 张 页 面 上 。 | 
使 用 thead 元 素 可 以 定义 表格 的 表 头 ， 该 标签 用 于 组 合 HTML 表格 的 表 头 内 容 ， 一 般 与 tbody 和 tfoot | 
元 素 结合 起 来 使 用 。 其 中 tbody 元 素 用 于 对 HTML 表格 中 的 主体 内 容 进行 分 组 ， 而 tfoot 元 素 用 于 对 HIML | 
表格 中 的 表 注 ( 页 脚 ) 内 容 进 行 分 组 。 
【示例 】 下 面 的 示例 使 用 了 上 述 各 种 表格 元 素 , 设计 一 个 符合 标准 的 表格 结构 ， 代 码 如 下 。 | 
<style type="text/css"> | 
table { width: 100%: } | 
caption { font-size: 24px: margin: 12px: color: blue: } | 
th, td { border: solid 1px blue: padding: 8px: } | 
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| [7 
b> 
| 
| tfoot td { text-align: right:; color red: } 
| </style> 
| <table> 
A <caption> 结构 化 表格 标签 </caption> 
| <thead> 
i <tr><th> 标签 </ 也 ><th> 说 明 </thb></tr> 
</thead> 
<tfoot> 
<tr><td colspan="2">* 在 表格 中 ， 上 述 标签 属于 可 选 标签 。</td></tr> 
</tfoot> 
<tbody> 
<tr><td>&lt thead&gt; </td> <td> 定义 表 头 结构 。</td></tr> 
<tr><td>&lt tbody&gt </td><td> 定义 表格 主体 结构 。</td></tr> 
<tr><td>&lt; tfoot&gt </td><td> 定义 表格 的 页 脚 结构 。</td></tr> 
</tbody> 
</table> 


在 上 面 示例 的 代码 中 ， 可 以 看 到 <tfoot> 是 放 在 <thead> 和 <tbody> 之 间 的 ， 而 最 终 在 浏览 器 中 会 发 现 


| <tfoof> 中 的 内 容 显示 在 表格 底部 。 在 <tfoot> 标签 中 有 一 个 colspan 属性 ， 该 属性 的 主要 功能 是 横向 合并 单 
| 元 格 ， 将 表格 底部 的 两 个 单元 格 合 并 为 一 个 单元 格 ， 示 例 效果 如 图 13.5 所 示 。 


lS EE 
结构 化 表格 标签 
说 明 


定义 表格 主体 结构 - 
定义 表格 的 页 著 结 构 。 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| “在 表格 中 ， 上 述 标签 属于 可 选 标签 。 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


图 13.5 表格 结构 效果 图 


”< 注 意 : 当 使 用 thead、tfoot 和 tbody 元 素 时 ， 必 须 使 用 全 部 的 元 素 ， 排 列 次 序 是 thead、tfoot、tbody， 
这 样 浏览 器 就 可 以 在 收 到 所 有 数据 前 呈现 页 脚 ， 且 这 些 元 素 必须 在 table 元 素 内 部 使 用 。 


在 默认 情况 下 ， 这 些 元 素 不 会 影响 到 表格 的 布局 。 不 过 ， 用 户 可 以 使 用 CSS 使 这 些 元 素 改变 表格 的 外 
观 。 在 thead 元 素 内 部 必须 包含 t 元 素 。 


13.2.5 ”表格 列 分 组 


ccol 和 colgroup 元 素 可 以 对 表格 中 的 列 进行 分 组 。 

ap 使 用 col 元 素 可 以 为 表格 中 的 一 个 或 多 个 列 定义 属性 值 。 如 果 需 要 对 全 部 列 应 用 样式 ，col 元 素 
， 这 样 就 不 需要 对 各 个 单元 格 和 各 行 重复 应 用 样式 了 。 

en 1】 下 面 的 示例 使 用 col 元 素 为 表格 中 的 3 列 设置 不 同 的 对 齐 方式 ， 效 果 如 图 13.6 所 示 。 
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<table width="100%" border="1"> 
<col align="left" /> 
<col align="center" /> 
<col align="right" > 


<tr><td> 慈母 手中 线 , </td><td> 游子 身上 衣 。</td><td> 临 行 密 密 颖 ,</td></tr> 
<tr><td> 意 恶 迟 迟 肯 。</td><td> 谁 言 十 草 心 . </td><td> 报 得 三 春晖 。</td></tr> 


</table> 


Oe ee 


开行 军 军区 ，| “| 


图 13.6 表格 列 分 组 样式 


| 
在 上 面 的 示例 中 ,使 用 3 个 col 元 素 为 表格 中 的 3 列 分 别 定义 不 同 的 对 齐 方式 。 这 里 使 用 HTML 属性 ， 


align 设置 对 齐 方式 ， 取 值 包括 right ( 右 对 齐 )、left ( 左 对 齐 )、center ( 
char ( 对 准 指定 字符 )。 由 于 浏览 器 支持 不 统一 ， 不 建议 使 用 align 属性。 


何 信 息 。 如 要 创建 列 ， 就 必须 在 tt 元 素 内 嵌入 td 元素 。 


居中 对 齐 )、justify ( 两 端 对 齐 ) 和 | 


送 提示 : 只 能 在 table 或 colgroup 元 素 中 使 用 col 元素。col 元 素 是 仅 包含 属性 的 空 元 素 ， 不 能 够 包含 任 
| 


使 用 colgroup 元 素 也 可 以 对 表格 中 的 列 进行 组 合 ， 以 便 对 其 进行 格式 化 。 如 果 需 要 对 全 部 列 应 用 样式 ， | 


colgroup 元 素 很 有 用 ， 这 样 就 不 需要 对 各 个 单元 和 各 行 重复 应 用 样式 了 。 


【示例 2】 下面 的 示例 使 用 colgroup 元 素 为 表格 中 的 每 列 定义 不 同 的 宽度 ， 效 果 如 图 13.7 所 示 。 


<style type="text/css"> 
.coll { width: 25%; color: red; font-size: 16px; } 
.col2 { width: 50%; color: blue; } 
</style> 
<table width="100%" border="1"> 
<colgroup span="2" class="coll"></colgroup> 
<colgroup class="col2"></colgroup> 


<tr><td> 慈母 手中 线 , </td><td> 游子 身上 衣 。</td><td> 临 行 密 密 缝 ,</td></tr> 
<tr><td> 意 恺 迟 迟 归 。</td><td> 谁 言 寸 草 心 . </td><td> 报 得 三 春晖 。</td></tr> 


</table> 


DD localhostestzhtnl x 


€ 3 © |© localhost/est2html 


| 医 呈 手中 线 。 全 了 年 上 交 - 上 临 行 鹤 定 等， 


ES ] 和 二 十 章 心 ， 上限 各 三 者 下 


图 13.7 定义 表格 列 分 组 样式 


colgroup 元 素 只 能 在 table 元 素 中 使 用 。 


为 列 分 组 定义 样式 时 ， 建 议 为 colgroup 或 col 元 素 添 加 class 属性 ， 然 后 使 用 CSS 类 样式 定义 列 的 对 齐 | 


303s 


ec 入 zu 开发 从 和 站 到 精通 ( 稚 课 靖 线 ) 


【示例 3】 从 上 面 两 个 示例 可 以 看 到 ，colgroup 和 col 元 素 具有 相同 的 功能 ， 同 时 也 可 以 把 col 元 素 租 入 
| colgroup 元 素 中 使 用 。 


ll 
| 
方式、 宽度 和 背景 色 等 样式 。 
| 


<table width="100%" border="1"> 
<colgroup> 
<col span="2" class="coll" /> 
<col class="col2" /> 
</colgroup> 
<tr><td> 慈母 手中 线 ，</td><td> 游子 身上 衣 。</td><td> 临 行 密 密 颖 ，</td></tr> 
<tr><td> 意 丽 迟 迟 明 。</td><td> 谁 言 寸 草 心 ，</td><td> 报 得 三 春晖 。</td></tr> 
</table> 


如 果 没 有 对 应 的 col 元 素 ， 列 会 从 colgroup 元 素 那里 继承 所 有 的 属性 值 。 


党 提示 : span 是 colgroup 和 col 元 素 专用 属性 ， 规 定 列 组 应 该 横 跨 的 列 数 ， 取 值 为 正 整数 。 例 如 ， 在 一 
个 包含 6 列 的 表格 中 ， 第 一 组 有 4 列 ， 第 二 组 有 2 列 ， 这 样 的 表格 在 列 上 进行 如 下 分 组 。 
<colgroup span="4"></colgroup> 
<colgroup span="2"></colgroup> 
浏览 器 将 表格 的 单元 格 合成 列 时 ， 会 将 每 行 前 4 个 单元 格 合成 第 一 个 列 组 ， 将 接 下 来 的 两 个 单 
元 格 合成 第 二 个 列 组 。 这 样 ，colgroup 元 素 的 其 他 属性 就 可 以 用 于 该 列 组 包含 的 列 中 了 。 

如 果 没有 设置 span 属性 ， 则 每 个 colgroup 或 col 元 素 代表 一 列 ， 按 顺序 排列 。 


<) 注意 : 现代 浏览 器 都 支持 colgroup 和 col 元 素 ， 但 是 Firefox、Chrome 和 Safari 浏览 器 仅 支持 col 和 

| colgroup 元 素 的 span 和 width 属性 。 也 就 是 说 ， 用 户 只 能 够 通过 列 分 组 为 表格 的 列 定义 统一 的 宽 
度 ， 另 外 也 可 以 定义 背景 色 ， 但 是 其 他 CSS 样式 不 支持 。 虽然 正 支持， 但 是 不 建议 用 户 去 应 用 。 
通过 示例 2， 用 户 也 能 够 看 到 CSS 类 样式 中 的 color: red; 和 font-size: 16px; 都 没有 发 挥 作用 。 


【示例 4】 下面 的 示例 定义 了 如 下 几 个 类 样式 ,然后 分 别 应 用 到 <col> 列 标签 中 ， 则 显示 效果 如 图 13.8 


| 

| 

| 

| 

| 

| 

| 

| 

| <style type="text/css"> 

| table { 上 * 表格 默认 样式 */ 

| border: solid 1px #99CCFF: 

| border-collapse: collapse: } 

”be_th {/* 标 题 行 类 样式 */ 

| background: #0000FF: 

| color: #fff: } 

| .bg_evenl {人 * 列 1 类 样式 */ 

| background: #CCCCFF: } 
.bg_even2 { /* 列 2 类 样式 */ 

| background: #FFFFCC: } 

| </style> 

| <table> 

| <caption>IE 浏览 器 发 展 大 事 记 </caption> 

| <colgroup> 


“354® 
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<col class="bg_ evenl" id="verson" /> 
<col class="bg_even2" id="postTime" /> 
<col class="bg_evenl" id="OS" /> 
</coleroup> 
<tr class="bg_th"> 
<th> 版 本 </th><th> 发 布 时 间 </th><th> 绑 定 系统 </th> 
</tr> 
<tr> 
<td>Internet Explorer 1</td><td>1995 年 8 月 </td><td>Windows 95 Plus! Pack</td> 
</t> 


</table> 


€ ,re ae "A 


Windows 95 

er hoes 和 1 月 | 

过 二 1996 年 8 月 | 
9 


图 13.8 设计 隔 列 变色 的 样式 效果 


13.3 设置 table 属性 


[D2 
| 


表格 元 素 包 含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 ， 也 有 几 个 专用 属性 无 法 使 用 CSS 
实现 。HTML5 支持 的 table 元 素 属 性 说 明 如 表 13.1 所 示 。 


表 13.1 HTML5 支持 的 table 元 素 属性 
属 性 说 明 


定义 表格 边框 ， 值 为 整数 ， 单 位 为 像素 。 当 值 为 0 时， 表示 隐藏 表格 边框 线 。 功 能 类 似 CSS 中 的 border 
属性 ， 但 是 没有 CSS 提供 的 边框 属性 强大 


border 


cellpadding | 定义 数据 表单 元 格 的 补 白 。 功 能 类 似 CSS 中 的 padding 属性 ， 但 是 功能 比较 弱 


cellspacing | 定义 数据 表单 元 格 的 边界 。 功 能 类 似 CSS 中 的 margin 属性 ， 但 是 功能 比较 弱 


width 定义 数据 表 的 宽度 。 功 能 类 似 CSS 中 的 width 属性 


设置 数据 表 的 外 边框 线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 

取 值 包括 void ( 不 显示 任 一 边框 线 )、above ( 顶端 边框 线 )、below ( 底部 边框 线 )、hsides ( 顶部 和 底 
部 边框 线 )、lhs ( 左边 框 线 )、rhs ( 右边 框 线 )、vsides ( 左 和 右 的 边框 线 )、box ( 所 有 四 周 的 边框 线 )、 
border ( 所 有 四 周 的 边框 线 ) | 


frame 


“355s 


Hz 交 和 Waik 开 安信 入门 到 精通 ( 蕉 课 靖 儿 及) 


| 
| 
| 
| 
| 
| 
| 
| 
| 


属 性 说 有 明 
| 设置 数据 表 的 内 边线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 
| rules 取 值 包括 none ( 禁止 显示 内 边线 )、groups ( 仅 显示 分 组 内 边线 )、rows ( 显示 每 行 的 水 平 线 )、cols ( 显 


示 每 列 的 垂直 线 )、all ( 显示 所 有 行 和 列 的 内 边线 ) 


| summary 定义 表格 的 摘要 ， 没 有 CSS 对 应 属性 


13.3.1 定义 单线 表格 


| frame 和 rules 是 两 个 特殊 的 表格 样式 属性 ， 用 于 定义 表格 的 各 个 内 、 外 边框 线 是 否 显示 。 由 于 使 
| 用 CSS 的 border 属性 可 以 实现 相同 的 效果 ， 所 以 不 建议 用 户 选用 。 这 两 个 属性 的 取 值 可 以 参考 表 13.1 
| 说 明 。 
【示例 】 在 下 面 的 示例 中 ， 借 助 表格 元 素 的 frame 和 mles 属性 定义 表格 以 单行 线 的 形式 进行 显示 。 
<table border="1" frame="hsides" rules="rows" width="100%"> 
<caption>frame 属性 取 值 说 明 </caption> 
<tr><th> 值 </th><th> 说 明 </th></tr> 
<tr><td>void</td><td> 不 显示 外 侧 边 框 。</td></tr> 
<tr><td>above</td><td> 显示 上 部 的 外 侧 边 框 。</td></tr> 
<tr><td>below</td><td> 显示 下 部 的 外 侧 边 框 。</td> </tr> 
<tr><td>hsides</td><td> 显示 上 部 和 下 部 的 外 侧 边 框 。</td></tr> 
<tr><td>vsides</td><td> 显示 左边 和 右边 的 外 侧 边 框 。</td></tr> 
<tr><td>lhs</td><td> 显示 左边 的 外 侧 边 框 。</td></tr> 
<tr><td>rhs</td><td> 显示 右边 的 外 侧 边框 。</td></tr> 
<tr><td>box</td> <td> 在 所 有 四 个 边 上 显示 外 侧 边框 。</td></tr> 
<tr><td>border</td><td> 在 所 有 四 个 边 上 显示 外 侧 边框 。</td></tr> 
</table> 


上 面 的 示例 通过 frame 属性 定义 了 表格 仅 显 示 上 下 边框 线 ， 使 用 rules 属性 定义 表格 仅 显 示 水 平 内 边线 ， 


[DY localhost/test1.html x NW 


© localhost/test1.html 


三 ame 属 性 取 值 说 明 
说 明 


值 


不 显示 外 侧 边框 。 

显示 上 部 的 外 侧 边框 。 

显示 下 部 的 外 侧 边框 。 

显示 上 部 和 下 部 的 外 侧 边框 。 
显示 左边 和 右边 的 外 侧 边 框 。 
显示 左边 的 外 侧 边框 。 

显示 右边 的 外 侧 边 框 。 

在 所 有 四 个 边 上 显示 外 便 边 框 。 
在 所 有 四 个 边 上 显示 外 侧 边 框 。 


| 图 13.9 定义 单线 表格 样式 
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| 

| 

13.3.2 “定义 分 离 单 元 格 
| 

cellpadding 属性 用 于 定义 单元 格 边沿 与 其 内 容 之 间 的 空白 ，cellspacing 属性 定义 单元 格 之 间 的 空间 。 这 | 


两 个 属性 的 取 值 单位 为 像素 或 者 百分比 。 
【示例 】 下 面 的 示例 设计 了 井 字 形状 的 表格 。 


<table border="1" frame="void" cellpadding="6" cellspacine="16"> | 
<caption>rules 属性 取 值 说 明 </caption> | 
<tr><th> 值 <th><th> 说 明 </th></tr> | 
<tr><td>none</td><td> 没有 线条 。</td></tr> | 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> | 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> | 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> | 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> | 
</table> 


上 面 的 示例 通过 frame 属性 隐藏 表格 外 框 ， 然 后 使 用 cellpadding 属性 定义 单元 格 内 容 的 边 距 为 6 像素 ， 
单元 格 之 间 的 间距 为 16 像素 ， 则 在 浏览 器 中 预览 效果 如 图 13.10 所 示 。 


© localhost/test1.html 
rules 属 性 取 值 说 明 


说 明 


没有 线条 


位 于 行 组 和 列 组 之 间 的 线条 。 


位 于 行 之 间 的 线条 。 


位 于 列 之 间 的 线条 。 


位 于 行 和 列 之 间 的 线条 。 


图 13.10 定义 分 离 单元 格 样式 


cellpadding 属性 。 


13.3.3 ”定义 细 线 边框 


使 用 table 元素 的 border 属性 可 以 定义 表格 的 边框 粗细 ， 取 值 单 位 为 像素 ， 当 值 为 0 时 表示 隐藏 边框 线 。| 
【示例 】 如 果 直 接 为 table 元 素 设置 border-"1"， 则 表格 呈现 的 边框 线 效果 如 图 13.11 所 示 。 下 面 的 示例 | 
配合 使 用 border 和 rmles 属性 ， 可 以 设计 细 线 表格 。 | 
<table border="1" rules="all" width="100%"> | 
<caption>rmles 属性 取 值 说 明 </caption> 


| 
| 
| 
| 
党 提示 : cellpadding 属性 定义 的 效果 ， 可 以 使 用 CSS 的 padding 样式 属性 代替 ， 建 议 不 要 直接 使 用 ， 
| 
| 
| 
| 
| 
| 
| 
| 
| 


sa357“ 


a [7Mss 各 负 Wut 开发 以 入 门 到 将 大 ( 稚 课 靖 希 县 ) 


b> 


| 

| 

| 

| 

| <tr><th> 值 </th><th> 说 明 </th></tr> 

| <tr><td>none</td><td> 没有 线条 。</td></tr> 

| <tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> 
| <tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></t> 

| <tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> 


<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> 


</table> 


13.12 所 示 。 


口 localhosthestihtml x 


“> OOomomennm | “> [Doanenmm A|: 


| 
| 上 面 的 示例 定义 了 table 元 素 的 border 属性 值 为 1， 同 时 设置 mles 属性 值 为 "all"， 则 显示 效果 如 图 
| 


rules 属 性 取 值 说 明 rules 属 性 取 值 说 明 
说 明 说 明 


没有 线条 。 


人 
二 - - 立 于 行 组 和 列 组 之 间 的 。 
[SEEEEETIJEEITDITE 位 于 行 之 间 的 线条 。 


| 位 于 行 之 间 的 线条 。 位 于 列 之 间 的 线条 。 


[位 于 列 之 间 的 线条 。 位 于 行 和 列 之 间 的 线条 。 


位 于 行 和 列 之 间 的 线条 。 


“13.3.4 添加 表格 说 明 


| 使 用 table 元 素 的 summary 属性 可 以 设置 表格 内 容 的 摘要 ， 该 属性 的 值 不 会 显示 ,但 是 
| 利用 该 属性 ， 也 方便 机 器 进行 表格 内 容 检索 。 


图 13.11 表格 默认 边框 样式 图 13.12 设计 细 线 边框 效果 


屏幕 阅读 器 可 以 


【示例 】 下 面 的 示例 使 用 summary 属性 为 表格 添加 了 一 个 简单 的 内 容 说 明 ， 以 方便 搜索 引擎 检索 。 


| 
| 
| <table border="1"” rules="all" width="100%" summary="rules 属性 取 值 说 明 "> 
| <tr><th> 值 </th><th> 说 明 </th></tr> 

| <tr><td>none</td><td> 没有 线条 。</td></tr> 

| <tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> 

| <tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> 

| <tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> 

| <tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> 

| </table> 

| 

| 

| 

| 

| 

| 

| 

| 


13.4 设置 td 和 也 属性 


| 单元 格 元 素 (td 和 也 ) 也 包含 了 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 
| 属性 无 法 使 用 CSS 实现 。HTML5 支持 的 td 和 也 元 素 属性 说 明 如 表 13.2 所 示 。 
| 


sH88™ 


， 也 有 几 个 专 | 
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表 13.2 HTML5 支持 的 td 和 th 元素 属性 


属 性 说 明 
abbr 定义 单元 格 中 内 容 的 缩写 版 本 
训 测 定义 单元 格 内 容 的 水 平 对 齐 方式 。 取 值 包括 Tight( 右 对 齐 )left( 左 对 齐 ).center( 居中 对 齐 )justigy( 两 
端 对 齐 ) 和 char ( 对 准 指定 字符 )。 功 能 类 似 CSS 中 的 text-align 属性 ， 建 议 使 用 CSS 完成 设计 
axis 对 单元 进行 分 类 。 取 值 为 一 个 类 名 
char 定义 根据 哪个 字符 来 进行 内 容 的 对 齐 
charoff 定义 对 齐 字符 的 偏 移 量 
colspan 定义 单元 格 可 横 跨 的 列 数 


headers 定义 与 单元 格 相关 的 表 头 
rowspan 定义 单元 格 可 横 跨 的 行 数 | 
定义 将 表 头 数据 与 单元 格 数据 相关 联 的 方法 。 取 值 包括 col( 列 的 表 头 ).colgroup( 列 组 的 表 头 )row( 行 | 


Oe 的 表 头 )、rowgroup ( 行 组 的 表 头 ) | 
5 定义 单元 格 内 容 的 垂直 排列 方式 。 取 值 包括 top ( 顶部 对 齐 )、 middle ( 居中 对 齐 )、 bottom ( 底部 对 齐 )、 


baseline ( 基线 对 齐 )。 功 能 类 似 CSS 中 的 vertical-align 属性 ， 建 议 使 用 CSS 完成 设计 


13.4.1 ”定义 跨 单元 格 显示 


colspan 和 rowspan 是 两 个 重要 的 单元 格 属性 ， 分 别 用 来 定义 单元 格 可 跨 列 或 跨行 显示 。 取 值 为 正 整 数 ， 
如 果 取 值 为 0 时 ， 则 表示 浏览 器 横 跨 到 列 组 的 最 后 一 列 ， 或 者 行 组 的 最 后 一 行 ， | 
【示例 】 下 面 的 示例 使 用 colspan=5 属性 定义 单元 格 跨 列 显示 ,效果 如 图 13.13 所 示 


<table border=1> 
<tr> 
<th align=center colspan=5> 课程 表 </ 了 h> 
</tr> 
<tr> 
<th> 星期 一 </th><th> 星期 二 </th> <th> 星期 三 </ 了 h><th> 星期 四 </th><th> 星期 五 </ 了 h> 
</tr> 
<tr> 
<td align=center colspan=5> 上 午 </td> 
</tr> 
<tr> 
<td> 语文 </td><td> 物理 </td> <td> 数学 </td> <td> 语文 </td><td> 美术 </td> 
</tr> 
<tr> 
<td> 数学 </td><td> 语文 </td><td> 体育 </td> <td> 英语 </td><td> 音乐 </td> 
</t> 
<tr> 
<td> 语文 </td> <td> 体育 </td><td> 数学 </td><td> 英语 </td><td> 地 理 </td> 
</tr> 
<tr> | 
<td> 地 理 </td><td> 化 学 </td><td> 语文 </td> <td> 语文 </td><td> 美术 </td> | 


sa 359* 


二 了 ci 利 mp 并 友人 和 站 到 精通 ( 狼 刘 靖 色 有) 


</> 
| <tr> 
| <td align=center colspan=5> 下 午 </td> 
y </t> 
<td> 作文 </td><td> 语文 </td><td> 数学 </td><td> 体育 </td><td> 化 学 </td> 


图 13.13 定义 单元 格 跨 列 显示 


13.4.2 定义 表 头 单元 格 
| 使 用 scope 属性 ， 可 以 将 单元 格 与 表 头 单元 格 联系 起 来 。 其 中 属性 值 row 表示 将 当前 行 的 所 有 单元 格 
| 和 表 头 单元 格 绑 定 起 来 ; 属性 值 col 表示 将 当前 列 的 所 有 单元 格 和 表 头 单元 格 绑 定 起 来 ; 属性 值 rowgroup 表 
| 示 将 单元 格 所 在 的 行 组 ( 由 thead 、tbody 或 tfoot 元 素 定 义 ) 和 表 头 单元 格 绑 定 起 来 ; 属性 值 colgroup 表示 
| 将 单元 格 所 在 的 列 组 ( 由 col 或 colgroup 元 素 定义 ) 和 表 头 单元 格 绑 定 起 来 。 

【示例 】 下 面 的 示例 将 两 个 也 元 素 标识 为 列 的 表 头 ， 将 两 个 td 元素 标识 为 行 的 表 头 。 


| 

| 

| <table border="1"> 

| <tr> 

| <th></th> 

| <th scope="col"> 月 份 </th> 
| <th scope="col"> 金额 </th> 
| </tr> 

| <tr> 

| <td scope="row">1</td> 

| <td>9</td> 

| <td>$100.00</td> 

| </tr> 

| <tr> 

| <td scope="row">2</td> 

| <td>4/td> 
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| 
| 
| 
| 
<td>$10.00</td> | 
| 
| 
| 
| 
| 


</t> 


</table> 
党 提示 : 由 于 不 会 在 普通 浏览 器 中 产生 任何 视觉 效果 ， 很 难 判断 浏览 器 是 否 支持 scope 属性 。 Ts 
ote 


13.4.3 ”为 单元 格 指定 表 头 


使 用 headers 属性 可 以 为 单元 格 指定 表 头 ， 该 属性 的 值 是 一 个 表 头 名 称 的 字符 串 ， 这 些 名 称 是 用 id 属 | 
性 定义 的 不 同 表 头 单元 格 的 名 称 。 

headers 属性 对 非 可 视 化 的 浏览 器 ， 也 就 是 那些 在 显示 出 相关 数据 单元 格 内 容 之 前 就 显示 表 头 单元 格 内 | | 
容 的 浏览 器 非常 有 用 。 | 

【示例 】 下 面 的 示例 分 别 为 表格 中 不 同 的 数据 单元 格 绑 定 表 头 ， 演 示 效 果 如 图 13.14 所 示 。 | 


<table border="1" width="100%"> 
<t> 


| 
| 
<thid="name"> 姓名 </th> | 
< 了 hid="Email"> 电子 邮件 </th> | 
<thid="Phone"> 电话 </th> | 
<th id="Address"> 地 址 </ 耻 > | 
</t> | 
<tr> | 
<td headers="name"> 张 三 </td> | 
<td headers="Email">zhangsan(@163.com</td> | 
<td headers="Phone">13522228888</td> 
<td headers="Address"> 北京 长 安 街 38 号 </td> 
</tr> 
</table> 


DD localhosthestihtml x W—\ 


€ > © [© localhost/testi.html 


姓名 电子 邮件 
张 三 [Ehangsang163. com L3522228888 比 京 长 安 街 38 号 


图 13.14 为 数据 单元 格 定义 表 头 


13.4.4 ”定义 信息 缩写 


使 用 abbr 属性 可 以 为 单元 格 中 的 内 容 定义 缩写 版 本 。abbr 属性 不 会 在 Web 浏览 器 中 产生 任何 视觉 效果 | 
方面 的 变化 ， 主 要 为 机 器 检索 服务 。 | 
【示例 】 下 面 的 示例 演示 了 如 何在 HIML 中 使 用 abbr 属性 。 | 


360615 


T 
| 
| 
| 
| <table border="1"> 
| <t> 
| <th> 名 称 </th> 
| <th> 说 明 </th> 
| </tr> 
<tr> 
<td abbr="HTML">HyperText Markup Language</td> 
<td> 超级 文本 标记 语言 </td> 
</tr> 
<tr> 
<td abbr="CSS">Cascading Style Sheets</td> 
<td> 层 痘 样式 表 </td> 
</tr> 
</table> 


13.4.5 单元 格 分 类 


a 7HMis 各 妈 Wet 开发 以 入 门 到 将 大 ( 稚 课 靖 六 县 ) 


| 使 用 axis 属性 可 以 对 单元 格 进行 分 类 ， 用 于 对 相关 的 信息 列 进行 组 合 。 在 一 个 大 型 数据 表格 中 ， 表 格 


| 里 通常 塞 满 了 数据 ， 通 过 分 类 属性 axis， 浏 览 器 可 以 快速 检索 特定 信息 
axis 属性 的 值 是 引号 包括 的 一 列 类 型 的 名 称 ， 这 些 名 称 可 以 用 来 形成 一 个 查询 。 例 如 ， 如 果 在 一 个 食 
| 物 购物 的 单元 格 中 使 用 axis=meals， 浏 览 器 能 够 找到 那些 单元 格 ， 获 取 它 的 值 ， 并 且 计算 出 总 


| 目前 ， 还 没有 浏览 器 支持 该 属性 。 

| 【示例 】 下 面 的 示例 使 用 了 axis 属性 为 表格 中 的 每 列 数据 进行 分 类 
| <table border="1" width="100%"> 

| <t> 

| <th axis="name"> 姓名 </th> 

| <th axis="Email"> 电子 邮件 </ 了 h> 

| <th axis="Phone"> 电话 </ 耻 > 

| <th axis="Address"> 地 址 </th> 

| </t> 

| <tr> 

| <td axis="name"> 张 三 </td> 

| <td axis="Email">zhangsan@163.com</td> 
| <td axis="Phone">13522228888</td> 

| <td axis="Address"> 北京 长 安 街 38 号 </td> 
| </t> 

| 

| 

| 

| 

| 

| 

外 

| 


将 数据 以 更 直观 的 方式 展示 给 用 户 ， 可 以 更 好 地 增强 用 户 体验 ， 


13.5 使 用 CSS 定义 表格 样式 


因此 ， 良 好 的 表格 设计 就 显得 愈 发 重 


| 要 。CSS 为 表格 定义 了 5 个 专用 属性 ， 详 细 说 明 如 表 13.3 所 示 。 
| 
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属 性 取 值 


说 明 


separate ( 边 分 开 )| 


bord ]] 
人 collapse ( 边 合 并 ) 


| 
| 
| 
| 
表 13.3 ”CSS 表格 属性 列表 | 
| 
| 
| 
定义 表格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HIML 样式 分 开 | 


border-spacing | length 


定义 当 表格 边框 独立 ( 如 当 border-collapse 属性 等 于 separate ) 时 ， 行 和 单元 格 
的 边 在 横向 和 纵向 上 的 间距 ,该 值 不 可 取 负 值 


caption-side top | bottom 


定义 表格 的 caption 对 象 位 于 表格 的 顶部 还 是 底部 。 应 与 caption 元 素 一 起 使 用 


empty-cells show |hide 


定义 当 单元 格 无 内 容 时 ， 是 否 显示 该 单元 格 的 边框 


table-layout auto | fixed 


除了 上 表 介绍 的 5 个 表格 专用 属性 外 ，CSS 其 他 属性 对 于 表格 一 样 适用 。 


13.5.1 定义 表格 的 基本 方法 


定义 表格 的 布局 算法 ， 可 以 通过 该 属性 改善 表格 呈 弟 性能， 如果 设 置 fxed 属 
性 值 ， 会 使 正 以 一 次 一 行 的 方式 呈 递 表格 内 容 从 而 提供 给 信息 用 户 更 快 的 速 
度 ; 如 果 设 置 auto 属性 值 ， 则 表格 在 每 一 单元 格 内 所 有 内 容 读 取 计算 之 后 才 会 
显示 出 来 


设计 表格 样式 考虑 的 要 素 包 括 表格 边框 、 字 体 样式 、 背 景色 、 内 外 边 距 等 。 具 体 来 说 可 以 按 如 下 几 步 | 


进行 操作 ， 这 样 就 不 容易 慌乱 。 


第 1 步 ，CSS 设计 和 布局 的 核心 是 盒 模型 ， 因 此 在 设计 表格 样式 时 也 要 考虑 到 盒 模型 ， 可 以 利用 | 


padding 属性 将 盒子 撑 开 。 例 如 : 


table tr. table td{ 
border: 1px solid #000: 
padding: 20px: /* 此 时 整个 


的 内 边 距 就 可 以 把 盒子 撑 开 */ 


} 


第 2 步 ， 根据 需要 ， 可 以 利用 col 元 素 设置 整 列 样式 。 例 如 : 
table coll { background: #edf931: 


#col_only{ background: #1de96a: 


第 3 步 , 利用 CSS3 的 : nth-child0 选择 器 ， 有 选择 地 进行 样式 设置 。 例 如 : 


/*nth-child() 选择 器 ， 选 择 父 元 


table tr: nth-child(even){ background: red: } 


第 4 步 ， 设 置 边 框 样式 ， 将 边框 折 笃 。 


table { 
border-collapse: collapse: 
border-spacing: 0: 
text-align: center: 
color: #333: 


表格 的 包含 框 是 最 外 层 的 盒子 ，table 是 包 庄 整个 表格 的 盒子 ， 设 置 每 一 行 每 一 列 


让 设置 整 列 样式 */} 
; 证 设置 整 列 样式 */} 


素 中 指定 的 子 元 素 ， 可 以 传人 odd、even 或 者 数字 */ 
睛 表格 边框 折 倒 大 部 分 表格 都 是 这 样 */ 


启 控 制 单元 格 之 间 的 距离 */ 
上 证 让 文字 居中 */ 
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通过 上 述 的 简单 设置 ， 就 可 以 设计 出 简单 的 样式 。 
第 5 步 ， 最 后 设计 字体 大 小 、 颜 色 ， 以 及 悬浮 状态 等 ， 就 可 以 呈现 出 更 加 优秀 的 效果 。 


使 用 CSS3 的 border 属性 可 以 定义 表格 边框 。 由 于 表格 中 每 个 单元 格 都 是 一 个 独立 的 对 象 ， 为 它们 定 


| 义 边框 线 时 ， 相 互 之 间 不 是 紧密 连接 在 一 起 的 。 


使 用 CSS3 的 border-collapse 属性 可 以 把 相 邻 单元 格 的 边框 合并 起 来 ， 相 当 于 把 相 邻 单元 格 连接 为 一 


整体 。 该 属性 取 值 包括 separate ( 单元 格 边框 相互 独立 ) 和 collapse ( 单元 格 边框 相互 合并 )。 


【示例 】 下 面 的 示例 在 <head> 标签 内 添加 <style type="text/css"> 标签 ， 定 义 一 个 内 部 样式 表 ， 然 后 编 
写 如 下 样式 。 


table {/* 合并 单元 格 边框 */ 
border-collapse: collapse: 
width: 100%; 
} 
th, td { border: solid 1px #ff0000: } /* 定义 单元 格 边框 线 为 1 像素 的 细 线 */ 


在 浏览 器 中 预览 ， 显 示 效 果 如 图 13.15 所 示 。 


Sle 
结构 化 表格 标签 
说 明 


| 定义 表 头 结构 。 
Ee EE 

[ 硅 又 表格 的 页 脚 结 和 。 
站 es Ee 


图 13.15 使 用 CSS 定义 单元 格 边框 样式 


| 5.3 定义 间距 


使 用 CSS3 的 border-spacing 属性 可 以 定义 单元 格 间距 。 取 值 包含 一 或 两 个 值 。 当 定义 一 个 值 时 ， 则 定 


| 文 单元 格 行 问 距 和 列 间距 都 为 该 值 。 例如 : 


table { border-spacing: 20px; }/* 分 隔 单元 格 边框 */ 

如 果 分 别 定义 行 间距 和 列 间 距 ， 就 需要 定义 两 个 值 ， 例 如 : 

table { border-spacing: 10px 30px; }/* 分 隔 单元 格 边框 */ 

其 中 第 一 个 值 表示 单元 格 之 间 的 行 间距 ， 第 二 个 值 表示 单元 格 之 间 的 列 间 距 ， 该 属性 值 不 可 以 为 负数 。 


cellspacing 属性 定义 单元 格 之 间 的 距离 之 后 ， 该 空间 由 表格 背景 填充 。 
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< 全 注意 : 使 用 CSS 的 cellspacing 属性 时 ， 应 确保 单元 格 之 间 的 相互 独立 性 ， 不 能 使 用 border-collapse: 
collapse; 声明 合并 表格 的 单元 格 边框 ， 也 不 能 够 使 用 CSS 的 margin 属性 来 代替 设计 ， 单 元 格 | 
之 间 不 能 够 使 用 margin 属性 调整 间距 。 | 
早期 下 浏览 器 不 支持 该 属性 ， 要 定义 相同 效果 的 样式 ， 还 需要 结合 传统 table 元 素 的 cellspacing ， 
属性 来 设置 。 


【示例 】CSS 的 padding 属性 与 HTML 的 cellpadding 属性 功能 相同 。 例 如 ， 下 面 的 样式 为 表格 单元 格 定 
义 上 下 6 像素 和 左右 12 像素 的 补 白 空间 ,效果 如 图 13.16 所 示 。 


table {/* 合并 单元 格 边框 */ 
border-collapse: collapse: 
width: 100%:; 

} 

th,td{ 
border: solid 1px #ff0000; 
padding: 6px 12px: 

} 


结构 化 表格 标签 
说 明 


定义 表 头 结构 。 
定义 表格 主体 结构 。 
定义 表格 的 页 脚 结构 。 
“在 表格 中 ， 上 述 标 签 属于 可 选 标 签 ， 


图 13.16 ”增加 单元 格 空隙 


13.5.4 ”定义 标题 


| 
| 
| 
| 
使 用 CSS3 的 caption-side 属性 可 以 定义 标题 的 显示 位 置 ， 该 属性 取 值 包括 top ( 位 于 表格 上 面 )、 
bottom ( 位 于 表格 底部 )。 如 果 要 水 平 对 齐 标题 文本 ， 则 可 以 使 用 text-align 属性 。 | 
【示例 】 以 上 节 示 例 为 基础 ， 在 下 面 的 示例 中 定义 标题 在 底部 显示 ， 显 示 如 图 13.17 所 示 。 | 
<style type="text/css"> | 

| 

| 

| 

| 


table {/* 合并 单元 格 边框 *#/ 
border-collapse: collapse: 
width: 100%: 

} 

th, td { border: solid 1px #ff0000: } 

caption {/* 定义 标题 样式 */ 
caption-side: bottom: 访 底 部 显示 */ 
margin-top: 10px: 雍 定 义 左右 边界 */ | 
font-size: 18px: 认定 义 字 体 大 小 */ | 
font-weight: bold: 谍 加 粗 显示 */ | 
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a 2 Pe 


| 
| 
| 
| color: #666: 上 广 灰 色 字 体 */ 
中 
| } 
| </style> 
| 
Ea 
HS 


E33 竟 明 
改 又 表 天 颖 移 。 

二 又 表 福 主体 颖 柯 。 

伍 又 表格 的 页 种 结 构 。 


上 在 表格 中 ， 上 上 述 标 签 属 于 可 迁 标 答 。 
结构 化 表格 标签 


图 13.17 增加 单元 格 空隙 


13.5.5 “定义 空 单 元 格 


| 
| 使 用 CSS3 的 empty-cells 属性 可 以 设置 空白 单元 格 是 否 显 示 ，empty-cells 属性 取 值 包括 show 和 hide。 
| 注意 ,该 属性 只 有 在 表格 单元 格 的 边框 处 于 分 离 状态 时 有 效 

【示例 】 继 续 以 上 节 示 例 为 基础 ， 在 下 面 的 示例 中 隐藏 页 脚 区 域 的 空 单元 格 边框 线 ， 隐 藏 前 后 比较 效果 
如 图 13.18 所 示 


| <style type="text/css"> 
| table {/* 合并 单元 格 边 框 */ 
| width: 100%; 
empty-cells: hide; 上 # 隐藏 空 单元 格 */ 
} 


th, td { border: solid 1px #ff0000: } 
caption {/* 定义 标题 样式 */ 


caption-side: bottom: 语 底 部 显示 */ 
margin-top: 10px; 谍 定 义 左右 边界 */ 
font-size: 18px: 请 定义 字体 大 小 所 
font-weight: bold: 上 府 加 粗 显示 */ 
color: #666: 谍 灰 色 字体 */ 

» 


SE SE 
说 明 标签 | 说 明 

| 证 义 表 头 结构 。 证 又 表 头 结构 。 

正义 表格 主体 结构 。 y> |] 定义 表格 主体 结构 

主义 表 格 的 页 脚 结构 。 证 又 表格 的 页 膨 络 构 。 


| 上 在 表格 中 ， 上 述 标签 属于 可 选 标签 。 卢 在 表格 中 ， 上 述 标签 属于 可 选 标签 
结构 化 表格 标签 结构 化 表格 标签 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| </style> 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


(a) 隐藏 前 (b ) 隐藏 后 
| 图 13.18 ”隐藏 空 单元 格 效果 
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西 


党 提示 : 如 果 单 元 格 的 visibility 属性 为 hidden， 即 便 单 元 格 包含 内 容 ， 也 认为 是 无 可 视 内 容 ， 即 空 单元 


格 。 可 视 内 容 还 包括 “&&nbsp; ”“， 以 及 其 他 空白 字符 。 


13.6 ”案例 实战 
下 面 通 过 几 个 案例 演示 如 何在 页 面 中 设计 表格 样式 ， 以 及 如 何 设计 自 适应 不 同 设备 的 表格 。 


13.6.1 设计 产品 信息 列表 


本 节 示 例 模 拟 易 购 网 的 选用 商品 列表 页 ， 使 用 表格 来 组 织 产品 信息 显示 ， 效 果 如 图 13.19 所 示 。 


选用 商品 列表 


商品 名 称 性 能 特点 价格 
革 果 手机 支持 移动 46、3G、2G , 双 | Y6998.00 
IPhone8S(16GB) 网 自由 切换 ,空前 网 络 体 
验 ! 


三 星 手机 Max (和 白 。 双 卡 双 待 ,四 核 高 速 处 理事 ¥6496.00 
色 ) 


小 米 手机 小 米 5 ( 星 。 馆 今 为 止 最 快 的 小 米 手机 。 | Y3099.00 
空 灰 ) 移动 版 


图 13.19 设计 产品 信息 列表 


<header class="header"> 
<p class="header-title"> 选用 商品 列表 </p> 


<div class="left-head"> <a id="goBack" href="javascript: history.go(-1): ”class="tc_back"> <span class="inset_ 


shadow"> <span class="header-return"></span> </span> </a> </div> 
</header> 
<section id="content"> 
<table cellspacing="0"> 
<tbody> 
<tr> 
<th> 商品 名 称 </ 了 h> 
<th> 性 能 特点 </th> 
<th> 价格 </th> 
</t> 
<tr> 
<td> 苹果 手机 iPhone8S(16GB)</td> 
<td> 支持 移动 4G、3G、2G. 双 网 自由 切换 ， 空 前 网 络 体验 ! </td> 
<td class="last">¥6998.00</td> 
</tr> 
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页 面 用 到 两 个 外 部 样式 表 : main.css 和 common.css， 其 中 main.css 为 页 面 主 样式 表 ，common.css 为 通 


和 


样式 表 ， 重 置 常用 元 素 默认 样式 。 下 面 我 们 重点 分 析 一 下 common.css 文件 中 的 表格 样式 。 


第 1 步 ， 设 计 表 格 框 样式 。 定 义 表格 宽度 为 90%， 为 了 避免 内 容 撑 大 表格 ， 使 用 overflow: hidden; 隐 


| 藏 超出 内 容 ; 使 用 margin-right: auto; 和 margin-left: auto; 让 表格 居中 显示 。 


使 用 border-radius: 5px; 定义 圆 角 效 果 ， 使 用 box-shadow: 0 0 4px rgba ( 0， 0，0，0.2 ); 声明 添加 淡淡 


| 的 阴影 ， 从 而 设计 精致 特效 的 表格 样式 。 


table { overflow: hidden: border: 1px solid #d3d3d3: background: #fefefe: width: 90%: 
border-radius: SpX: 
box-shadow: 0 0 4px rgba(0. 0. 0. 0.2): 
margin-top: SpX: margin-right: auto: margin-bottom: SpX: margin-left: auto: } 
第 2 步 ， 定 义 单元 格 样式 ， 通 过 padding 调整 单元 格 内 部 空 阶 ， 避 人 免 内 容 紧 贴 边线 。 
td { padding: 8px 10px 8px: text-align: left: } 


第 3 步 , 设计 表格 列 标题 样式 ， 加 上 浅 灰 色 背 景色 ， 居 中 显示 ,使 用 text-shadow: 1px 1px 1px #fff; 给 


体 添加 立体 效果 。 


th { text-align: center: padding: 10px 1Spx: text-shadow: 1px 1px 1px #fff; background: #egeaeb: } 


第 4 步 ， 设计 线 框 表格 ,为 单元 格 和 标题 头 定义 边框 线 。 


td { border-top: 1px solid #ccc: border-right: 1px solid #ccc: } 
th { border-right: 1px solid #ccc: } 


第 5 步 , 为 了 避免 边框 线 重 释 ， 取 消 单元 格 右 侧 的 边框 线 。 
td.last { text-align: center: border-right: none: } 
第 6 步 ， 为 单元 格 添加 渐变 背景 色 ， 营造 金属 质感 特效 。 


td { background: linear-gradient(100% 25% 90deg. #fefefe. #f919f9): } 
th { background: linear-gradient(100% 20% 90deg., #e8eaeb. #ededed): } 


第 7 步 ， 为 表格 四 个 顶 角 位 置 的 单元 格 设置 外 项 角 显 示 圆 角 ， 避 免 缆 盖 表 格 框 圆 角 效 果 。 
tr: first-child th.first { border-top-left-radius: Spx: } 

tr: first-child th.last { border-top-right-radius: Spx: } 

tr: last-child td .first { border-bottom-left-radius: Spx: } 

tr: last-child td.last { border-bottom-right-radius: Spx: } 


限于 篇 幅 ， 本 节 示 例 页 面 中 其 他 区 域 样式 代码 就 不 再 详细 展开 ， 读 者 可 以 参考 本 节 示例 源 代码 。 


本 节 示 例 设计 一 个 伸缩 布局 表格 ， 当 调整 页 面 宽度 ， 或 者 在 不 同 屏幕 尺寸 的 设备 上 尝试 浏览 ， 如 计算 
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机 或 手机 等 移动 设备 ， 表 格 呈 现 出 自 适应 布局 特征 ， 能 够 自动 地 使 用 不 同 的 屏幕 尺寸 ,数据 的 表现 不 会 因 
为 屏幕 大 小 变化 而 变 得 不 合适 ， 不 至 于 撑 开 视图 ， 或 者 显示 滚动 条 。 演 示 效 果 如 图 13.20 所 示 。 


寺 定 素 寺 
Windows 95 Plusl Pack 
Windows 和 Mac 
Windows 95 0SR2 
Windows 98 
Windows 98 Second Edilon 


Windows Milennium Edilon 


Windows XP 
Windows Vista 
Windows 7 
Wndows 7 
Wndows 8 
Windows 81 


Windows 10 


下 浏览 器 发 展 大 事 记 
Le AR IE 测 览 器 愉 展 大 下 记 
| 发 布 时 间 1995 年 8 月 发 布 时 间 
网 定 系 统 Wincows 95 Plusl Pack WenniEwiat “相亲 第 
Iniemet Explorer 2 1995 征 11 月 
上 本 neemet Expiorer 2 iniemel Expiorer 3 1996 和 8 月 
妇 布 四则 1995 征 1 月 tniemet Explorer 4 1997 年 9 月 
二 下 系统 Windowe 和 Mac omic 
Intemet Explorer 55 2000 年 9 月 
版 本 Intermet Explorer 3 Intemet Explorer 6 2001 手 10 月 
发 而 时 间 1996 年 8 月 met Epler7 2000 年 下 半年 
十 定 系 搞 Wincows 95 OSR2 Mert ets es 
Iniemel Explorer 9 2011 年 3 月 
版 本 Intemet Explorer 4 ttormot Explorer 10 2012 秆 
发 布 时 间 i Intemet Explorer 11 2013 生 6 月 
| we a Spertniil 交 器。 2015 年 3 月 
(a ) 手机 模拟 器 中 的 显示 效果 (b ) 桌面 浏览 器 中 的 显示 效果 


图 13.20 


的 形态 ， 以 列表 的 样式 进行 展示 。 


实现 技术 : 使 用 CSS 媒体 查询 中 的 media 关键 字 ， 检 测 屏幕 的 宽度 ， 然 后 利用 CSS 技术 ,重新 改造 ， 


设计 自 适 应 布局 表格 效果 
设计 思路 : 根据 设备 的 不 同 ， 转 换 表 格 中 的 列 。 例 如 ， 在 移动 端 彻底 改变 表格 的 样式 


让 表格 变 成 列表 ，CSS 的 神奇 强大 功能 在 这 里 得 以 体现 。 


设计 表格 结构 如 下 。 
<table> 
<caption> 
正 浏览 器 发 展 大 事 记 
</caption> 
<thead> 
<tr> 
<th> 版 本 </th> 
<th> 发 布 时 间 </th> 
<th> 绑 定 系统 </th> 
</t> 
</thead> 
<tbody> 
<t> 


<td data-label=" 版 本 ">Internet Explorer 1</td> 
<td data-label=" 发 布 时 间 ">1995 年 8 月 </td> 
<td data-label=" 绑 定 系统 ">Windows 95 Plus! Pack</td> 


</tr> 


</tbody> 


</table> 
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， 使 其 不 再 有 表格 | 
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| 设计 响应 式样 式 : 使 用 @media 判断 当 设备 视图 宽度 小 于 等 于 600 像素 时 ， 则 隐藏 表格 的 标题 ， 让 表格 
| 单元 格 以 块 显示 ， 并 向 左 浮动 ， 从 而 设计 重 直 堆 秋 显示 效果 ; 再 使 用 attr0 函数 获取 data-label 属性 值 ， 以 动 
| 态 方式 显示 在 每 个 单元 格 的 左 侧 。 代 码 如 下 。 


~ | @media screen and (max-width: 600px) { 
table { border: 0; } 
Note table thead { display: none: } 
tabletr { 
margin-bottom: 10px; 
display: block: 
border-bottom: 2px solid #ddd: 


} 
tabletd { 
display: block: 
text-align: Tight: 
font-size: 13px: 
border-bottom: 1px dotted ##ccc; 


上 
table td: last-child { border-bottom: 0: } 
table td: before { 
content: attr(data-label): 
float: left: 
text-transform: uppercase; 
font-weight: bold; 


”党 提示 : 上 面 的 示例 存在 一 个 缺点 ， 就 是 必须 为 每 个 单元 格 元 素 添加 data-label 属性 ， 如 果 数 据 比 较 多 ， 
| 这 种 方法 比较 烦琐 。 下 面 的 示例 尝试 直接 使 用 content 属性 为 每 个 单元 格 添加 说 明文 字 ， 这 样 就 
| 不 会 破坏 表格 结构 。 
| 主要 响应 式样 式 代码 如 下 ， 其 他 代码 请 参考 本 节 示 例 源码 。 通 过 这 种 方式 设计 ， 就 不 需要 为 每 个 单元 
| 格 添加 data-label 属性 值 。 
店 在 小 屏 设备 中 的 样式 2) 
@media only screen and (max-width: 760px). (min-device-width: 768px) and (max-device-width: 1024px) { 
证 强制 表格 不 再 像 表 格 一 样 显示 */ 
table, thead., tbody. th, td, tr, caption { display: block: } 


| 

| 

| 

| 

| 

| /# 隐藏 表格 标题 。 不 使 用 display: none: . 主要 用 于 辅助 功能 */ 
| thead tr { 
| 

外 

| 

| 

| 

| 

| 


position: absolute: 
top: -9999px: 
left: -9999px; 

} 


tr { border: 1px solid #ccc: } 

tt 放生 为 像 一 人 和/ 
| border: none: 
| border-bottom: 1px solid #eee: 
| position: relative: 
padding-left: 50%:; 


TOR 
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} 

td: before { 
让 现在 像 表格 标题 */ 
position: absolute; 
证 顶 / 左 值 模仿 填充 */ 
top: 6px;: left: 6px: 
width: 45%; 
padding-right: 10px: 


white-space: nowrap; 


}; 

启 标 记 数 据 */ 

td: nth-of-type(1): before { content: " 版 本 "; } 

td: nth-of-type(2): before { content: " 发 布 时 间 "; } 
td: nth-of-type(3): before { content: " 绑 定 系统 "; } 


13.6.3 ”设计 滚动 显示 表格 


本 节 示 例 设计 一 个 滚动 布局 表格 ， 当 调整 页 面 宽度 ， 或 者 在 不 同 屏幕 尺寸 的 设备 上 尝试 浏览 ， 如 计算 | 


机 或 好 


列 变 成 横向 垂直 堆 释 显 示 ， 同 时 显示 滚动 条 ， 深 动 显示 数据 部 分 内 容 ， 演 示 效 果 如 图 13.21 所 示 。 


设计 思路 : 根据 设备 的 不 同 ， 转 换 表格 中 的 列 。 例 如 ， 在 移动 端 彻底 改变 表格 的 样式 ， 使 其 浮动 显示 ,| 
以 列表 的 样式 进行 展示 ， 同 时 设置 tbody 水 平 滚动 显示 ， 这 样 就 可 以 在 小 屏 设备 中 滚动 显示 所 有 数据 。 | 
实现 技术 : 使 用 CSS 媒体 查询 中 的 media 关键 字 ， 检 测 屏幕 的 宽度 ， 然 后 利用 CSS 浮动 技术 ,让 表格 


让 
| 


rlsls slalslalalsl 


ge 


(a ) 手机 模拟 器 中 的 显示 效果 (b ) 桌面 浏览 器 中 的 显示 效果 
图 13.21 设计 滚动 布局 表格 效果 


变 成 列表 ，CSS 的 神奇 强大 功能 在 这 里 得 以 体现 。 
设计 表格 结构 如 下 。 


<table id="rtl" class="rt cf'> 


<thead class="cf'> 
<tr> 
<th>Selector</th> 
<th>IE7</th> 
<th>IE8</th> 
<th>IE9</th> 
<th>FF 3.6</th> 
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机 等 移动 设备 ， 表 格 呈 现 出 不 同 的 布局 特征 ， 在 窄 屏 设 备 中 能 够 调整 列 的 显示 方式 ， 由 纵向 水 平 排 | 


[xie 和 ip 开 疏失 到 类 首 ( 微 课 精 编 版 ) 


设计 小 屏 设备 下 的 显示 样式 。 
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刻 整 理 边界 */ 

Tt th { border-bottom: 0: } 

ttd{ 
border-left: 0: 
border-right: 0: 
border-bottom: 0; 


} 
Tt tbody tr { border-right: 1px solid #babcbf: } 
Tt th: last-child, .rt td: last-child { border-bottom: 1px solid #babcbf: } 


13.6.4 ”设计 隐藏 不 重要 的 数据 列 


隐藏 表格 中 的 列 ， 是 指 在 移动 端 隐藏 表格 中 不 重要 的 列 ， 从 而 达到 适 配 移动 端 布局 的 效果 。 实 现 技术 ， 
主要 是 应 用 CSS 中 媒体 查询 的 media 关键 字 ， 当 检测 为 移动 设备 时 ， 根 据 设 备 的 宽度 ， 将 不 重要 的 列 设置 | 
为 display: none， 演 示 效 果 如 图 13.22 所 示 。 | 


ID FEET 


[ER 


EO ma can | 5104 


ta | 1 


we ee Ey | 


(a) 小 屏 显示 效果 (b ) 中 屏 显示 效果 (c ) 大 屏 显 示 效 果 

图 13.22 设计 隐藏 布局 表格 效果 

具体 表格 结构 就 不 再 显示 ， 读 者 可 以 参考 本 节 实 例 源码 ， 其 中 核心 CSS 样式 如 下 。 
第 1 步 ， 定义 设备 的 屏幕 小 于 等 于 768 像素 时 ， 隐 藏 最 后 一 列 数据 。 


@media only screen and (max-width: 768px) { 
#tumover tr td: nth-child(9) { 
display: none: 
visibility: hidden: 


第 2 步 ， 定义 设备 的 屏幕 小 于 等 于 420 像素 时 ， 隐 藏 第 4、5、6、9 列 数 据 。 


@media only screen and (max-width: 420px) { 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
} 
| 
| 
| 
#changepercent, tr td: nth-child(4) { | 
| 

| 

| 

| 

| 

| 


display: none: 
Visibility: hidden: 
} 
#yhigh, tr td: nth-child(5) { 
display: none: 
visibility: hidden: | 
} | 
#ylow, tr td: nth-child(6) { | 
display: none: 
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Visibility: hidden: 

} 

#turnover, tr td: nth-child(9) { 
display: none; 
visibility: hidden: 


} 


@media only screen and (max-width: 320px) { 

#changepercent, tr td: nth-child(4) { 
display: none: 
Visibility: hidden: 

#yhigh, tr td: nth-child(5) { 
display: none; 
visibility: hidden: 

} 

#ylow. tr td: nth-child(6) { 
display: none: 
visibility: hidden: 

} 

#dhigh, tr td: nth-child(7) { 
display: none; 
visibility: hidden: 

} 

#dlow. tr td: nth-child(8) { 
display: none: 
visibility: hidden: 

} 

#turnover, tr td: nth-child(9) { 
display: none; 
visibility: hidden: 


13.7 在 线 练习 


| 本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HIMLS 设计 表格 结构 和 样式 。 
| 扫 码 练习 。 
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第 3 步 ， 定 义 设 备 的 屏幕 小 于 等 于 320 像素 时 ， 隐 藏 第 4、5、6、7、8、9 列 数据 。 


感 兴趣 的 读者 可 以 


使 用 CSS3 修饰 背景 


( 鳃 a 视频 讲解 : 51 分 钟 ) 


在 CSS 2.1 中 ，background 属性 的 功能 还 无 法 满足 设计 的 需求 ， 为 了 方便 设计 师 更 
灵活 地 设计 需要 的 网 页 效果 ，CSS3 在 原 有 background 的 基础 上 新 增 了 一 些 功能 属性 ， 
可 以 在 同一 个 对 象 内 登 加 多 个 背景 图 像 ， 可 以 改变 背景 图 像 的 大 小 尺寸 ， 还 可 以 指定 背 
景 图 像 的 显示 范围 ， 以 及 指定 背景 图 像 的 绘制 起 点 等 。 另 外 ，CSS3 多 许 用 户 使 用 渐变 
函数 绘制 背景 图 像 ， 这 极 大 地 降低 了 网 页 设计 的 难度 ， 激 发 了 设计 师 的 创作 灵感 。 


【学 习 重点 】 

I 设置 背景 图 像 的 原点 、 大 小 。 

PH 正确 使 用 背景 图 像 裁 切 属性 。 

网 灵活 使 用 多 重 背景 图 像 设 计 网 页 版 面 。 
PI 正 确 使 用 线性 渐变 和 径 向 渐变 。 

I 熟练 使 用 渐变 函数 设计 网 页 元 件 。 


eic 疙 mxuk 开 去 信和 站 到 精通 ( 稚 课 靖 全 县 ) 


14.1 设计 背景 图 像 


CSS3 增强 了 background 属性 的 功能 ， 允 许 在 同一 个 元 素 内 全 加 多 个 背景 图 像 ， 还 新 增 了 3 个 与 背景 相 
| 关 的 属性 : background-origin 、background-clip 和 background-size。 下 面 分 别 进行 介绍 。 


权威 参考 


目 


14.1.1 设置 定位 原点 


background-origin 属性 定义 background-position 属性 的 定位 原点 。 在 默认 情况 下 ，background-position 

| 属性 总 是 根据 元 素 左上 角 的 坐标 原点 进行 背景 图 像 定位 。 使 用 background-origin 属性 可 以 改变 这 种 定位 方 
| | 式 。 该 属性 的 基本 语法 如 下 。 

background-origin: border-box | padding-box | content-box; 

取 值 简单 说 明 如 下 。 

回 border-box: 从 边框 区 域 开始 显示 背景 。 

回 padding-box: 从 补 白 区 域 开始 显示 背景 ， 为 默认 值 。 

回 contentbox: 仅 在 内 容 区 域 显示 背景 。 

【示例 】background-origin 属性 改善 了 背景 图 像 定 位 的 方式 ， 可 更 灵活 地 决定 背景 图 像 应 该 显示 的 位 置 
| 下面 的 示例 利用 了 background-origin 属性 重 设 背景 图 像 的 定位 坐标 ， 以 便 更 好 地 控制 背景 图 像 的 显示 ， 演 
| 示 效 果 如 图 14.1 所 示 。 
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1 
名 


荔 轼 


雪 。 江 山 如 画 ， 一 时 多 少 各 杰 。 


速 想 公 瑾 当年 ， 小 乔 初 妊 了 ， 茜 姿 英 发 。 羽 康 纶 巾 ， 谈 笑 间 ， 樟 槽 灰飞烟灭。 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| Wy 会 如 是- 亦 避 剑 古 
| 

| 

| 

| 

| 

| 

| 

| 

| 生 华 发 。 人 生 如 梦 ， 一 革 还 时 江 月 。 
| 

| 

| 
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| 图 14.1 设计 诗词 效果 
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第 ]4 章 使 用 CSS3 修饰 背景 


示例 代码 如 下 。 


<style type="text/css"> 
div {/* 定义 包含 框 的 样式 */ 
height: 322px: 
width: 780px; 
border: solid 1px red: 
padding: 250px 4em 0; 
久 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 */ 
background: url(images/p3.jpg) no-repeat: 
久 设 计 背 景 图 像 的 定位 坐标 点 为 元 素 边框 的 左上 角 六 
background-origin: border-box: 
旋 将 背景 图 像 等 比 缩放 到 完全 落 盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 %/ 
background-size: cover:; 


overflow: hidden: 片 隐 藏 超出 包含 框 的 内 容 */ 


} 
div hl, div h2{/* 定义 标题 样式 */ 
font-size: 18px; font-family:" 幼 圆 "; 


text-align: center: 已 水 平 居中 显示 */ 
} 
divp fl* 定义 正文 样式 */ 
text-indent: 2em: 上 请 首 行 缩 进 2 个 字符 */ 
line-height: 2em; 让 增 大 行 高 ， 让 正文 看 起 来 更 玖 朗 */ 
margin-bottom: 2em: 上 # 调 整 底 部 边界 ， 增 大 段落 文本 距离 */ 
} 
</style> 
<div> 
<hl> 念 奴 娇 &#8226: 赤壁 怀古 <hl> 
<h2> 苏轼 </h2> 


<p> 大 江东 去 ， 浪 淘 尽 ， 千 古风 流 人 物 。 故 全 西边 ， 人 道 是 三国 周 郎 赤壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 卷 起 千 
堆 雪 。 江 山 如 画 ， 一 时 多 少 察 杰 。</p> 
<p> 遥想 公 弄 当年 ， 小 乔 初 嫁 了 ， 雄 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 ， 档 榴 灰 飞 烟 灭 。 故国 神游 ， 多 情 应 笑 我 ， 
早生 华发 。 人 生 如 梦 ， 一尊 还 醒 江 月 。</p> 
</div> 


14.1.2 ”设置 裁剪 区 域 


background-clip 属性 定义 背景 图 像 的 裁 前 区 域 。 该 属性 的 基本 语法 如 下 。 
background-clip: border-box | padding-box | content-box | text: 


区 值 简单 说 明 如 下 。 

border-box: 从 边框 区 域 向 外 裁剪 背景 ， 为 默认 值 。 
padding-box: 从 补 白 区 域 向 外 裁剪 背景 。 
content-box: 从 内 容 区 域 向 外 裁剪 背景 。 

text: 从 前 景 内 容 ( 如 文字 ) 区 域 向 外 裁剪 背景 。 


因 因 办 轨 


“377's 


ee [xie 和 uk 开放 从 和 n 到 关 和 ( 微 课 精 编 版 ) 


如 果 取 值 为 padding-box， 则 background-image 将 忽略 补 白 边 缘 ， 此 时 边框 区 域 显 示 为 透明 ; 
如 果 取 值 为 content-box， 则 background-image 将 只 包含 内 容 区 域 。 
如 果 background-image 属性 定义 了 多 重 背 景 ， 则 background-clip 属性 值 可 以 设置 多 个 值 ， 并 用 
过 号 分 隔 。 
如 果 background-clip 属性 值 为 padding-box，background-origin 属性 取 值 为 border-box， 且 
background-position 属性 值 为 "top left" ( 默认 初始 值 )， 则 背景 图 左上 角 将 会 被 截取 掉 一 部 分 。 
【示例 1】 下 面 的 示例 演示 了 如 何 设计 背景 图 像 仅 在 内 容 区 域内 显示 ， 演 示 效 果 如 图 14.2 所 示 。 
<style type="text/css"> 
div{ 
height: 150px: 
width: 300px: 
border: solid S0px gray: 
padding: 50px: 
background: url(images/bg.jpg) no-repeat: 
少将 背景 图 像 等 比 缩放 到 完全 审 盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 */ 
background-size: cover: 
店 将 背景 图 像 从 content 区 域 开始 向 外 裁剪 背景 */ 


background-clip: content-box: 


| 
| 
| 
| 
| 
| 党 提示 : 如 果 取 值 为 border-box， 则 background-image 将 包括 边框 区 域 。 
| 
| 
中 


1 
</style> 


<div></div> 


让 四 -| 你 hatpyioclho- - B © | Blocahost 


图 14.2 ”以 内 容 边缘 裁 切 背景 图 像 效果 


| 【示例 2】 下 面 的 示例 同时 定义 了 background-origin 和 background-clip 属性 值 为 content-box， 可 以 设计 
| 比较 特殊 的 按钮 样式 ， 演 示 效 果 如 图 14.3 所 示 。 


| <style type="text/css"> 
| button { 


sa 


第 ]4 章 使 用 CSS3 修饰 背景 


width: 150px: 

padding: 1px: ”* 在 内 容 区 留 点 空 阶 */ 
cursor: pointer; /* 定义 手 形 指针 样式 */ 
color: #fff，/* 白色 字体 */ 


放 设 计 立 体 边框 样式 */ 


T 
| 
| 
| 

height: 40px: ”/* 固定 包含 框 大 小 */ | 
| 
| 
| 


border: 3px double 加 5071b: | 
border-right-color: #650513; | 
border-bottom-color: #650513: | 
久 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 */ | 
background: url(images/img6.jpg) no-repeat: | 
证 设计 背景 图 像 的 定位 坐标 点 为 元 素 内 容 区 域 的 左上 角 */ | 
background-origin: content-box: | 
铺设 计 背景 图 像 以 内 容 区 域 的 边缘 进行 裁 切 背景 图 像 */ | 
background-clip: content-box: | 


4 
</style> 
<button> 导航 按钮 >></button> 


x 
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图 14.3 ”设计 按钮 效果 


14.1.3 ”设置 背景 图 像 大 小 


background-size 可 以 控制 背景 图 像 的 显示 大 小 。 该 属性 的 基本 语法 如 下 。 


background-size: [ <length> | <percentage> | auto ]{1. 2} | cover | contain: 


| 
| 
| 
| 
| 
取 值 简单 说 明 如 下 。 | 
回 <length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 | 
回 <percentage>: 取 值 为 0~100% 的 值 ， 不 可 为 负 值 。 | 
回 cover: 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 覆盖 所 定义 背景 的 区 域 。 | 
回 contain: 保持 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 宽度 或 高 度 正好 适应 所 定义 背景 的 区 域 。 | 
初始 值 为 auto。background-size 属性 可 以 设置 一 个 或 两 个 值 ， 一 个 为 必 填 ， 一 个 为 可 选 。 其 中 第 一 个 
值 用 于 指定 背景 图 像 的 width， 第 二 个 值 用 于 指定 背景 图 像 的 height， 如 果 只 设置 一 个 值 ， 则 第 二 个 值 默 认 | 
为 auto。 | 
【示例 】 下 面 的 示例 使 用 了 background-size 属性 自由 定制 背景 图 像 的 大 小 ， 让 背景 图 像 自 适应 盒子 的 大 | 
小 ， 从 而 可 以 设计 与 模块 大 小 完全 匹配 的 背景 图 像 ， 本 示例 效果 如 图 14.4 所 示 ， 只 要 背景 图 像 长 宽 比 与 元 | 
素 长 宽 比 相同 ， 就 不 用 担心 背景 图 像 会 变形 显示 。 | 
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图 14.4 设计 背景 图 像 自 适应 显示 


示例 代码 如 下 。 


<style type="text/css"> 

| div{ 

| margin: 2px; 

| float: left: 

| border: solid 1px red: 

| background: url(images/img2.jpg) no-repeat center: 
| 铺设 计 背景 图 像 完 全 哮 盖 元 素 区 域 */ 
| background-size: cover: 

| 

| 此 设计 元 素 大 小 */ 

| ‘hl { height: 80px: width: 110px: } 

| .h2 { height: 400px; width: 550px: } 
</style> 

<div class="h1"></div> 

<div class="h2"></div> 


| 14.1.4 ”设置 多 重 背 景 图 像 


| 
| 
| 
| 
| CSS3 支持 在 同一 个 元 素 内 定义 多 个 背景 图 像 ， 还 可 以 将 多 个 背景 图 像 进行 乔 加 显示 ， 从 而 使 得 设计 多 
| 图 背景 栏目 变 得 更 加 容易 。 

| 【示例 1】 本 例 使 用 CSS3 多 背景 设计 花边 框 ， 使 用 background-origin 定义 仅 在 内 容 区 域 显示 背景 ， 使 
| 

| 

| 

| 

| 


| 用 background-clip 属性 定义 背景 从 边框 区 域 向 外 裁剪 ， 如 图 14.5 所 示 。 


| 图 14.5 ”设计 花边 框 效果 
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第 14 章 使 用 CSS3 修饰 普 景 gy 


| 

| 

示例 代码 如 下 。 | 

| 

<style type="text/css"> | 

-demo { | 

铺设 计 元 素 大 小 、 补 白 、 边 框 样式 ,边框 为 20 像素 ,颜色 与 背景 图 像 色 相同 */ | 

width: 400px: padding: 30px 30px: border: 20px solid rgba(104., 104. 142. 0.5): 上 
启 定 义 圆 角 显示 */ 

border-radius: 10px: | 

谨 定 义 字体 显示 样式 */ | 

color: #f36; font-size: 80px: font-family: " 隶书 "; line-height 1.5: text-align: center: | 

| 

: 

| 

| 


.multipleBg { 
让 定义 5 个 背景 图 ， 分 别 定位 到 4 个 项 角 ， 其 中 前 4 个 禁止 平 铺 ， 最 后 一 个 可 以 平 铺 */ 
background: url("images/bg-tLpng") no-repeat left top, 
url("images/bg-trpng") no-repeat right top, 
url("images/bg-bl.png") no-repeat left bottom. 
url(“images/bg-br.png") no-repeat right bottom. | 
url("images/bg-repeat.png") repeat left top: | 
证 改变 背景 图 像 的 position 原点 ， 四 朱 花 都 是 border 原点 ， 而 平 铺 背景 是 padding 原点 */ | 
background-origin: border-box. border-box, border-box. border-box, padding-box; | 
族 控 制 背景 图 像 的 显示 区 域 ， 所 有 背景 图 像 超过 border 外 边缘 都 将 被 剪 切 掉 */ | 
background-clip: border-box: | 
} | 
</style> | 
<div class="demo multipleBg"> 恭喜 发 财 </div> | 
| 


【示例 2】 在 下 面 的 示例 中 利用 CSS3 多 背景 图 功能 设计 了 圆 角 栏目 ， 效 果 如 图 14.6 所 示 。 


<style type="text/css"> 
.Toundbox { 

padding: 2em: 

让 为 容器 定义 8 个 背景 图 像 */ 

background-image: url(images/roundbox1/t].gif). 
url(images/roundbox 1/tr.gif). 
url(images/roundbox1/bl.gif). 
url(images/roundbox1/br.gif). 
url(images/roundbox1/right.gif). 
url(images/roundbox1/left.gif). 
url(images/roundbox1/top.gif). 
url(images/roundbox1/bottom.gif): 

让 定义 4 个 顶 角 图 像 禁 止 平 铺 .4 个 边框 图 像 分 别 沿 x 轴 或 了 轴 平 铺 */ 

background-repeat: no-repeat. 
no-repeat. 
no-repeat. 
no-repeat. 
Tepeat-y, 
Tepeat-y, 
Tepeat-X- 
Tepeat-X: 

证 定义 4 个 顶 角 图 像 分 别 固定 在 4 个 项 角 位 置 .4 个 边框 图 像 分 别 固定 在 四 边 位 置 */ 
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棺 


T 

| 

| 

| background-position: left Opx, 
Tight Opx, 
| 


left bottom, 
| Tight bottom. 
全 -| | Tight Opx. 
Opx Opx. 
Note 1eft Opx, 
left bottom: 
background-color: #66CC33: 
} 
</style> 


<div class="roundbox"> 
<hl> 念 奴 娇 &#8226: 赤壁 怀古 </h1> 
<h2> 苏轼 </h2> 
<p> 大 江东 去 ， 浪 淘 尽 ,千古 风流 人 物 。 故 对 西边 ， 人 道 是 ， 三 国 周 郎 赤壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 卷 起 千 
堆 雪 。 江 山 如 画 ， 一 时 多 少 豪杰 。</p> 
<p> 遥想 公 弄 当年 ， 小 乔 初 嫁 了 ， 雄 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 ， 档 榴 灰 飞 烟 灭 。 故 国 神游 ， 多 情 应 笑 我 ， 
早生 华发 。 人 生 如 梦 ， 一 尊 还 酶 江 月 。</p> 
</div> 
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图 14.6 定义 多 背景 图 像 
注意 ， 每 幅 背 景 图 像 的 源 、 定 位 坐标 以 及 平 铺 方 式 的 先后 顺序 要 一 一 对 应 。 


侈 提示 : 上 面 的 示例 用 到 了 多 个 背景 属性 : background-image、background-repeat 和 background-position。 
这 些 属性 都 是 CSS1 中 就 有 的 属性 ， 但 是 在 CSS3 中 ,允许 同 时 指定 多 个 属性 值 ， 多 个 属性 值 
以 各 号 作为 分 隔 符 来 指定 多 个 背景 图 像 的 显示 性 质 。 


14.2 设计 渐变 背景 


| W3C 于 2010 年 11 月 正式 支持 渐变 背景 样式 ， 该 草案 作为 图 像 值 和 图 像 蔡 换 内 容 模块 的 一 部 分 进行 发 
| 布 。 主 要 包括 linear-gradientO 、repeating-linear-gradientO 、radial-gradient() 和 repeating-radial-gradient04 个 渐 
| 变 函 数 。 

| 
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第 ]4 章 使 用 CSS3 修饰 蔡 景 


14.2.1 定义 线性 渐变 


创建 一 个 线性 渐变 ， 至 少 需要 两 个 颜色 ， 也 可 以 选择 设置 一 个 起 点 或 一 个 方向 。 简 明 语 法 格式 如 下 。 


linear-gradient(angle, color-stop1, color-stop2. …… ) 


参数 简单 说 明 如 下 。 
回 angle: 用 来 指定 渐变 的 方向 ， 可 以 使 用 角度 或 者 关键 字 来 设置 。 关 键 字 包 括 4 个 ， 说 明 如 下 。 
> toleft: 设置 渐变 为 从 右 到 左 ， 相 当 于 270deg。 
> to tright: 设置 渐变 为 从 左 到 右 ， 相 当 于 90deg。 
> to top: 设置 渐变 为 从 下 到 上 ， 相 当 于 0deg。 
> tobottom: 设置 渐变 为 从 上 到 下 ， 相 当 于 180deg。 该 值 为 默认 值 。 


次 提示 : 如 果 创建 对 角 线 渐变 ， 可 以 使 用 to top left ( 从 右 下 到 左上 ) 类 似 组 合 来 实现 。 


回 colorstop: 用 于 指定 渐变 的 色 点 ， 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 空格 分 | 
隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 ( 不 可 为 负 值 )， 也 可 以 是 一 个 百分比 值 ， 如 果 是 百分比 值 | 


则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 


【示例 1】 下面 的 示例 为 <div id="demo"> 对 象 应 用 了 一 个 简单 的 线性 渐变 背景 ， 方 向 从 上 到 下 ,颜色 由 


白色 到 浅 灰 显示 ， 效 果 如 图 14.7 所 示 
<style type="text/css"> 
#demo { 
width: 300px: 
height: 200px: 
background: linear-gradient(#fff., #333):; 
} 
</style> 
<div id="demo"></div> 


x 
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图 14.7 应 用 简单 的 线性 渐变 效果 


“383» 


eic 各 muk 开 直 信 入门 到 精通 ( 蕉 课 靖 多 县 ) 


党 提示 : 针对 示例 1， 读 者 可 以 继续 尝试 做 下 面 的 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 。 
回 设置 一 个 方向 : 从 上 到 下 ， 改 盖 默 认 值 。 
; linear-gradient(to bottom, #EEE #333); 
设置 反 向 渐变 : 从 下 到 上 ， 同 时 调整 起 止 颜色 位 置 。 
linear-gradient(to top. #333, #fD; 


>| 


使 用 角度 值 设置 方向 。 
linear-gradient(180deg, #fff, #333); 


加 明确 起 止 颜色 的 具体 位 置 ， 履 盖 默 认 值 。 
linear-gradient(to bottom, #ffF 0%, #333 100%%); 


【拓展 】 
| 最 新 主流 浏览 器 都 支持 线性 渐变 的 标准 用 法 ， 但 是 考虑 到 安全 性 ， 用 户 应 酌情 兼容 旧版 本 浏览 器 的 私 
| 有 属性 。 


| Webkit 是 第 一 个 支持 渐变 的 浏览 器 引擎 ( Safari 4+ )， 它 使 用 -webkit-gradient0 私有 函数 支持 线性 渐变 
| 样式， 简明 用 法 如 下 。 
| -webkit-gradient(linear, point, point stop) 


参数 简单 说 明 如 下 。 
回 point: 定义 渐变 起 始点 和 结束 点 坐标 。 该 参数 支持 数值 、 百 分 比 和 关键 字 ， 如 (00) 或 者 (left 


| 

| 加 linear: 定义 渐变 类 型 为 线性 渐变 。 

| top ) 等 。 关 键 字 包括 top 、bottom 、left 和 right。 

| 回 stop: 定义 渐变 色 和 步 长 ,包括 3 个 值 ， 即 开始 的 颜色 ， 使 用 from ( colorvalue ) 函数 定义 ; 结束 
| 的 颜色 ， 使 用 to ( colorvalue ) 函数 定义 ; 颜色 步 长 ， 使 用 color-stop ( value，color value ) 定义 。 
| color-stop0 函数 包含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范围 在 0~1.0 (或 
| 者 0~100% )， 第 二 个 参数 值 表 示 任 意 颜色 值 。 
| 【示例 2】 下 面 的 示例 针对 示例 1， 羔 容 早期 Webkit 引擎 的 线性 渐变 实现 方法 。 
| #demo { 

| width: 300px: height: 200px: 
| background: -webkit-gradient(linear, left top. left bottom, from(#ffD), to(#333)): 
| background: linear-gradient(#fEE #333):; 

| 

| 

| 

| 

| 

| 


上 面 的 示例 定义 了 线性 渐变 背景 色 ， 从 顶部 到 底部 ， 从 白色 向 浅 灰色 渐变 显示 ， 在 谷歌 的 Chrome 浏览 
器 中 所 见效 果 与 上 图 相同 。 

另外 ，Webkit 引擎 也 支持 -webkit-linear-gradient0 私有 函数 来 设计 线性 渐变 。 该 函数 用 法 与 标准 函数 
linear-gradient( 语法 格式 基本 相同 。 
| Firefox 浏览 器 从 3.6 版 本 开始 支持 渐变 ，Gecko 引擎 定义 了 -moz-linear-gradient0 私有 函数 来 设计 线 
| 性 渐变 。 该 函数 用 法 与 标准 函数 linear-gradient0 语法 格式 基本 相同 。 唯 一 的 区 别 就 是 ， 当 使 用 关键 字 设 置 
渐变 方向 时 ， 不 带 to 关键 字 前 级 ， 关 键 字 语义 取 反 。 例 如 ， 从 上 到 下 应 用 渐变 ， 标 准 关键 字 为 to bottom， 
| Firefox 私有 属性 可 以 为 top。 
【示例 3】 下 面 的 示例 针对 示例 1， 兼 容 早期 Gecko 引擎 的 线性 渐变 实现 方法 。 
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#demo { | 
width: 300px: height: 200px; | 
background: -webkit-eradient(linear, left top. left bottom. from(#f1). to(#333)); | 
background: -moz-linear-gradient(top. #ffF, #333); | 
background: linear-gradient(#EE #333): | 


14.2.2 ”设计 线性 渐变 样式 | 
本 节 以 案例 形式 介绍 线 忆 
【示例 1】 下 面 的 示例 演示 

所 示 


<style type="text/css"> 


if 变 中 渐变 方向 和 色 点 的 设置 ， 演 示 设 计 线 性 渐变 的 一 般 方 法 
了 从 左边 开始 的 线性 渐变 。 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 14.8 


#demo { | 
width: 300px: height: 200px; 
background: -webkit-linear-gradient(left, red. blue): /* Safari 5.1~6.0 */ | 
background: -0-linear-gradient(left. red, blue): /* Opera 11.1~12.0 #/ 
background: -moz-linear-gradient(left, red, blue); /* Firefox 3.6~15 */ 
background: linear-gradient(to right, red, blue): 证 标准 语 法 */ 

} 

</style> 


<div id="demo"></div> 


第 一 个 参数 值 渐变 方向 的 设置 不 同 
【示例 2】 通 过 指定 水 平和 垂直 的 起 始 位 
角 的 线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 
#demo { 
width: 300px: height: 200px: 
background: -webkit-linear-gradient(left top. red, blue):  /* Safari 5.1~6.0 */ 
background: -0-linear-gradient(left top. red. blue): /* Opera 11.1~12.0 */ 
background: -moz-linear-gradient(left top. red, blue): /* Firefox 3.6~15 */ 
background: linear-gradient(to bottom right, red, blue); ” /* 标准 语法 */ 


设计 对 角 渐变 。 下 面 的 示例 演示 了 从 左上 角 开 始 ， 到 右 下 
效果 如 图 14.9 所 示 


localhost8080/mysite/t X 


€ DO localhosts080/m 加 器 C|» 


图 14.8 设计 从 左 到 右 的 线性 渐变 效果 图 14.9 设计 对 角 线 性 渐变 效果 | 


s 9385 


GE 


CD 
CE 
4 


【示例 3】 通 过 指定 具体 的 角度 值 ， 可 以 设计 更 多 的 渐变 方向 。 下 面 的 示例 演示 了 从 上 到 下 的 线性 渐变 ， 
起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 14.10 所 示 。 
#demo { 
width: 300px: height: 200px: 
background: -webkit-linear-gradient(-90deg, red. blue); /* Safari$.1 -6.0*/ 


background: -o-linear-gradient(-90deg, red, blue): /# Opera 11.1 - 12.0 */ 
| background: -moz-linear-eradient(-90deg, red, blue): /* Firefox 3.6- 15 #/ 
| background: linear-gradient(180deg, red, blue); 上 标准 语法 */ 
| 
【补充 】 


| 渐变 角度 是 指 垂直 线 和 渐变 线 之 间 的 角度 ， 逆 时 针 方 向 计算 。 例 如 ，0deg 将 创建 一 个 从 下 到 上 的 渐变 ， 
| 90deg 将 创建 一 个 从 左 到 右 的 渐变 。 注 意 ， 渐 变 起 点 以 负 Y 轴 为 参考 

| 但 是 ， 很 多 浏览 器 ( 如 Chrome 、Safari、Firefox 等 ) 使 用 旧 的 标准 : 渐变 角度 是 指 水 平 线 和 渐变 线 之 
| 间 的 角度 ， 逆 时 针 方 向 计算 。 例 如 ，0deg 将 创建 一 个 从 左 到 右 的 渐变 ，90deg 将 创建 一 个 从 下 到 上 的 渐变 
渐变 起 点 以 负 义 轴 为 参考 

| 兼容 公式 如 下 


90-x=y 


其 中 ，x 为 标准 角度 ，y 为 非 标 准 角度 
【示例 4】 设 置 多 个 色 点 。 下 面 的 示例 定义 了 从 上 到 下 的 线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 绿色 ， 再 
慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 14.11 所 示 
#demo { 
width: 300px: height: 200px; 
background: -webkit-linear-gradient(red., green, blue): & /* Safari 5.1~6.0 */ 


background: -0-linear-gradient(red, green. blue): /* Opera 11.1~12.0 */ 
background: -moz-linear-gradient(red. green. blue): /* Firefox 3.6~15 */ 
background: linear-gradient(red, green. blue): 语 标 准 语法 */ 
| 
| 
| localhost:8080/mysite X 
| € Dlocalhosts080/mysit 回 C|» 
| 
| 
| 
| 
| 
| 
| 
| 图 14.10 设计 从 上 到 下 的 渐变 效果 图 14.11 设计 多 色 线性 渐变 效果 
| 
| 【示例 5】 设置 色 点 位 置 。 下 面 的 示例 定义 了 从 上 到 下 的 线性 渐变 ， 起 点 是 黄色 ,快速 过 渡 到 蓝 色 ,再 


! 慢 


慢 过 渡 到 绿色 ， 效 果 如 图 14.12 所 示 。 
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NS | 
| 
#demo { | 
width: 300px: height: 200px: | 
background: -webkit-linear-gradient(yellow. blue 20%. #0f0): /* Safari 5.1~6.0 */ | 
background: -o-linear-gradient(yellow. blue 20%. #0f0): /* Opera 11.1~12.0 */ | 
background: -moz-linear-eradient(yellow. blue 2096. #0f0): /* Firefox 3.6~15 */ | 
background: linear-gradient(yellow. blue 20%, #0f0): 目标 准 语法 */ | 

} 


【示例 6】CSS3 渐变 支持 透明 度 设置 ， 可 用 于 创建 减弱 变 淡 的 效果 。 下 面 的 示例 演示 了 从 左边 开始 的 线 | 
性 渐变 。 起 点 是 完全 透明 ， 起 点 位 置 为 30%， 慢 慢 过 渡 到 完全 不 透明 的 红色 ， 为 了 更 清晰 地 看 到 半 透 明 效 | 
果 ， 示 例 增 加 了 一 层 背景 图 像 进 行 衬托 ， 演 示 效 果 如 图 14.13 所 示 | 


| 
| 
#demo { | 
| 
| 


‘width: 300px: height: 200px; 

/* Safari 5.1~6 */ 

background: -webkit-linear-gradient(left, rgba(255. 0, 0. 0) 30%, rgba(255. 0. 0. 1)), url(images/bg.jpg): 
* Opera 11.1~12*/ 

background: -0-linear-gradient(left, rgba(255. 0. 0. 0) 30%, rgba(255, 0. 0. 1)), url(images/bg.jpg); 

/* Firefox 3.6~15*/ 

background: -moz-linear-gradient(left, rgba(255. 0. 0, 0) 30%. rgba(255. 0. 0, 1)), url(images/bg.jpe); 


证 标准 语法 */ 
background: linear-gradient(to right, rgba(255. 0. 0. 0) 30%, rgba(255, 0. 0. 1)), url(images/bg.jpe): 


| 
| 
background-size: cover; /# 背 景 图 像 完 全 覆盖 所 | 
| 
| 
| 


图 14.12 设计 多 色 线 性 渐变 效果 图 14.13 ”设计 半 透 明 线 性 渐变 效果 


疝 提示 : 为 了 添加 透明 度 ， 可 以 使 用 rgba0 或 hsla0) 函数 来 定义 色 点 。IEba0) 或 hsla0 函数 中 最 后 一 个 参 
数 可 以 是 从 0~1 的 值 ， 它 定义 了 颜色 的 透明 度 : 0 表示 完全 透明 ，1 表示 完全 不 透明 。 


14.2.3 案例: 设计 网 页 渐变 色 


为 页 面 设计 渐变 背景 ， 可 以 营造 特殊 的 浏览 气氛 。 本 节 示 例 主要 代码 如 下 ， 预 览 效果 如 图 14.14 所 示 。 
<style type= "text/css"> 
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padding: lem: 

margin: 0; 

background: -webkit-linear-eradient(#FF6666., #fffff:  /* Safari 5.1~6.0 */ 

background: -o-linear-gradient(#FF6666. #fffffp: /# Opera 11.1~12.0 #/ 

background: -moz-linear-gradient(#EFF6666. #ffffp: /* Firefox 3.6~15 */ 

background: linear-gradient(#FF6666, #ffffP: 片 标 准 语法 */ 

卢 正 滤 镜 ， 蔷 容 正 9- 版 本 浏览 器 */ 

filter: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#FF6666, endColorStr=#fffffp); 


| 
| 
| 
| body { /* 让 渐变 背景 填 满 整个 页 面 */ 
| 
| 
| 
| 
| 


. 
hl {/* 定义 标题 样式 */ 
color: white; 
font-size: 18px: 
height: 45px: 
padding-left: 3em; 
line-height: 50px; /* 控制 文本 显示 位 置 */ 
border-bottom: solid 2px red: 
background: url(images/pel.png) no-repeat left center: /* 为 标题 插入 一 个 装饰 图 标 */ 
| 
Pp { text-indent: 2em; }/* 段落 文本 缩 进 两 个 字符 */ 
</style> 
<div class="box"> 
<hl>W3C 发 布 HTMLS5 的 正式 推荐 标准 </h1> 
<p>2014 年 10 月 28 日 , W3C 的 HTML 工作 组 正式 发 布 了 HIMLS 的 正式 推荐 标准 (W3C Recommendation)。 
W3C 在 美国 圣 克拉 拉 举 行 的 W3C 技术 大 会 及 顾问 委员 会 会 议 (TPAC 2014) 上 宣布 了 这 一 消息 。HTML5 
是 万 维 网 的 核心 语言 一 可 扩展 标记 语言 的 第 5 版 。 在 这 一 版 本 中 ,增加 了 支持 Web 应 用 开发 者 的 许多 新 
特性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 用 和 
内 容 在 不 同 用 户 代理 (浏览 器 ) 中 的 互 操 作 性 。HIMLS 是 构建 开放 Web 平台 的 核心 。</p> 
<p class="right"> 更 多 <a href="http: //www.chinaw3c.org/archives/677/" target=”blank"> 详细 内 容 </a></p> 


| 

| 

i 

| 

| 
€ JEITTTEOEEI Fy | A 
| 

| PE 有 W3C 发 布 HTMLS 的 正式 推荐 标准 

| 

| 车 言 一 可: 在 这 了 支持 Web 应 用 

| 发 尾 朋 许多 ee 
| 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 用 和 内 容 在 不 同 用 户 代理 (浏览 器 ) 中 
| 的 互 操作 性 。HTML5 是 构建 开放 Web 平 台 的 核心。 

| 更 多 详细 内 容 

| 

| 图 14.14 设计 渐变 网 页 背景 色 效果 

| 

| 【补充 】 


”下 早期 版 本 不 支持 CSS 渐变 ， 但 提供 了 渐变 滤 镜 ， 可 以 实现 简单 的 渐变 效果 。 王 浏览 器 渐变 滤 镜 的 基 
| 本 语法 说 明 如 下 。 
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filter: progid: DXImageTransform.Microsoft.Gradient(enabled=bEnabled. startColorStr=iWidth, endColorStr=iWidth) 


该 函数 的 参数 说 明 如 下 。 
回 enabled: 设置 或 检索 滤 镜 是 否 激活 。 可 选 布尔 值 ， 包 括 true 和 false， 默 认 值 为 tue， 激 活 状态 。 
回 startColorStr: 设置 或 检索 色彩 渐变 的 开始 颜色 和 透明 度 。 可 选项 ， 其 格式 为 #AARRGGBB。AA、| 
RR、GG、BB 为 十 六 进 制 正 整数 ， 取 值 范围 为 00~FF。AA 指定 透明 度 ，00 是 完全 透明 ，FF 是 完 项 M[V73 
全 不 透明 。RR 指定 红色 值 ，GG 指定 绿色 值 ，BB 指定 蓝 色 值 。 超 出 取 值 范围 的 值 将 被 恢复 为 默 | 
认 值 。 取 值 范围 为 本 F000000-~#EFFFFFFF， 默 认 值 为 放 F0000FF， 即 不 透明 蓝 色 。 
回 endColorsStr: 设置 或 检索 色彩 渐变 的 结束 颜色 和 透明 度 。 默 认 值 为 手 F000000， 即 不 透明 黑色 
注意 ， 正 渐变 滤 镜 在 正 5.5 及 其 以 上 版 本 浏览 器 中 有 效 。 


14.2.4 “案例 : 设计 条 纹 背 景 | 


如 果 多 个 色 点 设置 相同 的 起 点 位 置 ， 它 们 将 产生 一 个 从 一 种 颜色 到 另 一 种 颜色 的 急剧 的 转换 。 从 效果 | 
来 看 ， 就 是 从 一 种 颜色 突然 改变 到 另 一 种 颜色 ， 这 样 可 以 设计 条 纹 背 景 效果 。 | 
【示例 1】 定义 一 个 简单 的 条 纹 背 景 ,效果 如 图 14.15 所 示 
<style type="text/css"> 
#demo { 
height: 200px; 
background: linear-gradient(#cd6600 50%,. #0067cd 50%): 
} 
</style> 
<div id="demo"></div> 


【示例 2】 利用 背景 的 重复 机 制 ， 可 以 创造 出 更 多 的 条 纹 。 示 例 代码 如 下 ， 效 果 如 图 14.16 所 示 。 这 样 | 

就 可 以 将 整个 背景 划分 为 10 个 条 纹 ， 每 个 条 纹 的 高 度 一 样 | 
#demo { | 
height: 200px; | 
background: linear-gradient(#cd6600 50%, #0067cd 50%): | 
background-size: 100% 20%; 访 定 义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 */ | 


© CT CEICTCS A 
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图 14.15 设计 简单 的 条 纹 效果 图 14.16 设计 重复 显示 的 条 纹 效果 


【示例 3】 如 果 设 计 每 个 条 纹 高 度 不 同 ， 只 要 改变 比例 即 可 ,示例 代码 如 下 ,效果 如 图 14.17 所 示 。 | 


Bas 
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兴 的 >、 
be 


height: 200px: 


T 
| 

| 

| 

| #demo { 
外 

| background: linear-gradient(#cd6600 80%, #0067cd 0%): /* 定义 每 个 条 纹 位 置 占 比 不 同 */ 
中 

中 


background-size: 100% 20%:; 广 定 义 单个 条 纹 仅 显 示 高 度 的 五 分 之 一 */ 
A 
ACJ 和 [示例 4] 设计 多 色 条 纹 背景 代码 如 下 ,效果 如 图 14.18 所 示 。 
| #demo { 
| height: 200px; 
| 放 定 义 三 色 同 宽 背 景 */ 
| background: linear-gradient(#cd6600 33.3%, #0067cd 0. #0067cd 66.6%, #00cd66 0): 
| background-size: 100% 30px: 
| 国 
| 


OO em/ sles "BE (oe ec] | 


图 14.17 设计 不 同 高 度 的 条 纹 效果 图 14.18 设计 多 色 条 纹 效果 


【示例 S】 设 计 密集 条 纹 格 效果 ， 代 码 如 下 ， 效 果 如 图 14.19 所 示 


#demo { 
height: 200px: 
background: linear-gradient(rgba(0. 0. 0. .5) 1px, #ffF 1px):; 
background-size: 100% 3px: 


D localhost8080/mysite/ x 


€ 2 © |Q localhost:8080/mysite/testS.htmll 


| 图 14.19 设计 密集 条 纹 效果 
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可 


注意 , 正 不 支持 这 种 设计 效果 。 
【示例 6】 设 计 垂 直 条 纹 背 景 ， 只 需要 转换 一 下 宽 和 高 的 设置 方式 ， 具 体 代码 如 下 ， 效 果 如 图 14.20 
所 示 。 

#demo { | 
height: 200px: | 
background: linear-gradient(to Tight, #cd6600 50%. #0067cd 0): 
background-size: 20% 100%; 


| 

) 
【示例 7】 设 计 简 单 的 纹理 背景 ， 代 码 如 下 ， 效 果 如 图 14.21 所 示 | 
ee | 
height: 200px: | 

| 


background: linear-gradient(45deg, RGBA(0. 103. 205. 0.2) 50%., RGBA(0. 103, 205. 0.1) 50%); 
background-size: 50px S0pX: 


OOo ew le "BE Oeew som 


图 14.20 设计 垂直 条 纹 效果 图 14.21 设计 简单 的 纹理 效果 | 


党 提示 : 在 实际 应 用 中 ， 不 建议 使 用 太 多 的 背景 颜色 ， 一 般 可 以 考虑 使 用 一 种 背景 色 ， 并 在 这 个 颜色 的 | 
深浅 上 设计 变化 。 


使 用 repeating-linear-gradient0 函数 可 以 定义 重复 线性 渐变 ， 用 法 与 linear-gradient( 函数 相同 ， 读 者 可 | 
以 参考 第 一 节 的 说 明 。 


14.2.5 “定义 重复 线性 渐变 


交 提示 : 使 用 重复 线性 渐变 的 关键 是 要 定义 好 色 点 ， 让 最 后 一 个 颜色 和 第 一 个 颜色 能 够 很 好 地 连接 起 来 ， | 
处 理 不 当 将 导致 颜色 的 急剧 变化 。 | 

【示例 1】 下 面 的 示例 设计 了 重复 显示 的 垂直 线性 渐变 ， 颜 色 从 红色 到 蓝 色 ， 间 距 为 20%6， 效 果 如 | 

图 14.22 所 示 。 | 


<style type= "text/css"> | 
#demo { | 


3301s 


De 


height: 200px: 

background: repeating-linear-gradient(#f00, #00f 20%. #f00 40%): 
</style> 
<div id="demo"></div> 


次 提示 : 使 用 linear-gradient() 可 以 设计 repeating-linear-gradient() 的 效果 ， 例 如， 通过 重复 设计 每 一 个 色 
| 点 ， 或 者 利用 上 一 节 设计 条 纹 的 方法 来 实现 。 


【示例 2】 下 面 的 示例 设计 了 重复 线性 渐变 对 角 显 示 ， 效 果 如 图 14.23 所 示 


| #demo { 
| height: 200px: 
| background: Tepeating-linear-gradient(135deg. #cd6600. #0067cd 20px, #cd6600 40px):; 
| } 
x 用 | 
Oo -ew scleomo CE (Oe cle "ec 改 芭 


图 14.22 ”设计 重复 显示 的 垂直 渐变 效果 图 14.23 设计 重复 显示 的 对 角 渐 变 效果 


【示例 3】 下 面 的 示例 设计 了 使 用 重复 线性 渐变 创建 出 对 角 条 纹 背 景 ， 效 果 如 图 14.24 所 示 
#demo { 

height: 200px: 

background: repeating-linear-gradient(60deg, #cd6600. #cd6600 5%, #0067cd 0. #0067cd 10%); 


x 


BaD) OB pocahostt ~- ao] Bocatos ， 关 立 


| 图 14.24 设计 重复 显示 的 对 角 条 纹 效果 
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侈 提示 : 针对 示例 1， 
设置 径 向 渐变 形状 类 型 ， 默 认 值 为 ellipse。 

background: radial-gradient(ellipse, red, green, blue); 
回 设置 径 向 渐变 中 心 点 坐标 ， 默 认为 对 象 中 心 点 。 


创建 一 个 径 向 渐变 ， 也 至 少 需要 定义 两 个 颜色 ， 同 时 可 以 指定 渐变 的 中 心 点 位 置 、 形 状 类 型 (四 形 或 | 
椭圆 形 ) 和 半径 大 小 。 


14.2.6 “定义 径 向 渐变 | 


Tadial-gradient(shape 


参数 简单 说 明 如 下 。 
回 shape: 用 来 指 


简明 语法 格式 如 下 。 
size at position, color-stop1, color-stop2,……” ); 
人 全 包括 circle ( 圆 形 ) 和 ellipse ( 椭圆 ) 两 种 。 


的 x 轴 和 y 轴 半径 。 i 百分比 、 关 键 字 。 关 键 字 说 明 如 下 。 

> closest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 边 。 

> closest-corner: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 角 。 

> ”farthest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 边 。 | 

> ”farthest-cormer: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 角 。 
回 position: 用 来 指定 中 心 点 的 位 置 。 如 果 提 供 两 个 参数 ， 第 一 个 表示 Xx 轴 坐标 ， 第 二 个 表示 y 轴 坐标 ; | 


如 果 只 提供 一 


| 
| 
| 
| 
回 size: 如 果 类 型 为 circle， 一 个 值 设 置 圆 的 半径 ; 如 果 类 型 为 ellipse， 指定 两 个 值 分 别 设置 本 加 | 
| 
| 


个 值 ， 第 二 个 值 默 认为 50%， 即 center。 取 值 可 以 是 长 度 值 、 百 分 比 或 者 关键 字 ， 关 | 


键 字 包 括 left ( 左 侧 )、center ( 中 心 )、right ( 右 侧 )、top ( 顶部 )、center ( 中 心 ) 和 bottom ( 底部 )。 | 
< 注意 ; position 值 位 于 shape 和 size 值 后 面 。 


回 er 用 
。 起 点 位 置 
en 用 浙 


于 指定 渐变 的 色 点 。 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜色 值 和 起 点 位 置 以 空格 分 | 
可 以 为 一 个 具体 的 长 度 值 ( 不 可 为 负 值 )， 也 可 以 是 一 个 百分比 值 ， a 
变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 


【示例 1】 在 默认 情况 下 ， 渐 变 的 中 心 是 center ( 对 象 中 心 点 )， 渐 变 的 形状 是 ellipse ( 椭圆 形 )， 源 变 | | 
的 大 小 是 farthest-corner ( 表示 到 最 远 的 角落 )。 下 面 的 示例 仅 为 radial-gradient(O 函数 设置 3 个 颜色 值 ， 则 它 | 
将 按 默 认 值 绘制 径 向 渐变 效果 ， 如 图 14.25 所 示 。 


<style type= "text/css"> 


#demo { 
height: 200px: 
background: -webkit-radial-gradient(red. green, blue): /* Safari 5.1~6.0 */ 
background: -0-radial-gradient(red., green. blue): /* Opera 11.6~12.0 */ 
background: -moz-radial-eradient(red. green. blue): /* Firefox 3.6~15 */ 
background: radial-gradient(red. green. blue): 广 标 准 语法 */ 

1 

</style> 


<div id="demo"></div> 


读者 可 以 继续 尝试 做 下 面 的 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 。 


background: radial-gradient(ellipse at center 50%, red, green, blue): | 
设置 径 向 渐变 大 小 ， 这 里 定义 填充 整个 对 象 。 | 
background: radial-gradient(farthest-corner, red, green, blue): | 
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| Note 


二 人 


最 新 主流 浏览 器 都 支持 线性 渐变 的 标准 用 法 ， 但 是 考虑 到 安全 性 ， 用 户 应 酌情 兼容 旧版 本 浏览 器 的 私 
| 有 属性 。 
| Webkit 引擎 使 用 -webkit-gradientO 私有 函数 支持 径 向 渐变 样式 ， 简 明 用 法 如 下 。 


-Webkit-gradient(radial, point, radius. stop) 


| 参数 简单 说 明 如 下 。 

| 回 radial: 定义 渐变 类 型 为 径 向 渐变 。 

| 回 point: 定义 渐变 中 心 点 坐标 。 该 参数 支持 数值 、 百 分 比 和 关键 字 ,， 如 (0 0 ) 或 者 (left top ) 等 ， 

关键 字 包 括 top、bottom、center、left 和 right。 

回 radius: 设置 径 向 渐变 的 长 度 ， 该 参数 为 一 个 数值 。 

回 stop: 定义 渐变 色 和 步 长 。 包 括 3 个 值 ， 即 开始 的 颜色 ， 使 用 from ( colorvalue ) 函数 定义 ; 结束 
的 颜色 ,使 用 to ( colorvalue ) 函数 定义 ; 颜色 步 长 ， 使 用 colorstop ( value，color value ) 定义 
color-stop() 函数 包含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范围 在 0-1.0 (或 

| 者 0%~100% )， 第 二 个 参数 值 表示 任意 颜色 值 

| 【示例 2】 下 面 的 示例 设计 了 一 个 红色 圆 球 ， 并 逐步 径 向 渐变 为 绿色 背景 ， 兼 容 早 期 Webkit 引擎 的 线性 

渐变 实现 方法 。 代 码 如 下 ， 演 示 效 果 如 图 14.26 所 示 

<style type="text/css"> 

#demo { 
height: 200px; 
族 Webkit 引擎 私有 用 法 */ 
background: -webkit-gradient(radial. center center. 0, center center, 100. from(red). to(green)): 
background: radial-gradient(circle 100px, red, green); /* 标准 的 用 法 */ 

, 

</style> 

<div id="demo"></div> 


| 【拓展 】 


" 
x 


OO-e/ee ele “EE 


口 localhosta0e0/mysite! x 


© |© localhost8080/mysite/test2.ntml 


图 14.25 设计 简单 的 径 向 渐变 效果 图 14.26 设计 径 向 圆 球 效果 


另外 ，Webkit 引擎 也 支持 -webkit-radial-gradientO 私有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函数 
radial-gradient( 语法 格式 类 似 。 简 明 语法 格式 如 下 。 


-webkit-radial-gradient(position. shape size. color-stop1. color-stop2. …… 和 


| Gecko 引擎 定义 了 -moz-radial-gradientO 私有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函数 radial- 
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gradient() 语法 格式 也 类 似 。 简 明 语法 格式 如 下 。 | 
yy 


-moz-radial-gradient(position, shape size, color-stop1. color-stop2, … 


党 提示 : 上 面 两 个 私有 函数 的 size 参数 值 仅 可 设置 关键 字 closest-side、closest-corner、farthest-side、 


farthest-corner 、contain 或 cover。 


14.2.7 ”设计 径 向 渐变 样式 | 


本 节 以 案例 形式 介绍 径 向 渐变 的 灵活 设置 ， 帮 助 读者 熟练 掌握 设计 径 向 渐变 的 一 般 方法 。 
【示例 1】 下 面 的 示例 演示 了 色 点 不 均匀 分 布 的 径 向 渐变 ， 效 果 如 图 14.27 所 示 。 


<style type= "text/css"> 


#demo { 
height: 200px: | 
background: -Webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1~6.0 */ | 
background: -0-radial-eradient(red 5%, green 15%, blue 60%); /* Opera 11.6~12.0 */ | 
background: -moz-radial-gradient(red 5%,. green 15%, blue 60%):; /* Firefox 3.6~15 */ | 
background: radial-gradient(red 5%, green 15%,. blue 60%); 证 标准 语法 */ | 

} 

</style> 


<div id="demo"></div> | 


【示例 2】shape 参数 定义 了 形状 ， 取 值 包括 circle 和 ellipse， 其 中 circle 表示 圆 形 ，ellipse 表示 椭圆 形 ，| 
默认 值 是 ellipse。 下 面 的 示例 设计 了 圆 形 径 向 渐变 ， 效 果 如 图 14.28 所 示 
#demo { | 


height: 200px: 
background: -webkit-radial-gradient(circle, red. yellow., green): /* Safari $5.1~6.0 */ 


background: -0-radial-gradient(circle, red, yellow, green): /* Opera 11.6~12.0 */ 
background: -moz-radial-gradient(circle. red. yellow. green): /* Firefox 3.6~15 */ 
background: radial-gradient(circle. red. yellow. green): 族 标 准 语法 */ 
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图 14.27 设计 色 点 不 均匀 分 布 的 径 向 渐变 效果 图 14.28 ”设计 圆 形 径 向 渐变 效果 


【示例 3】 下 面 设计 径 向 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 近 的 边 ， 效 果 如 图 14.29 所 示 。 | 


#demo { | 
height: 200px: | 
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/* Safari 5.1~6.0 */ 

background: -webkit-radial-gradient(60% 55%, closest-side, blue, green. yellow. black): 
/* Opera 11.6~12.0 */ 

background: -0-radial-eradient(60% 55%, closest-side. blue, green, yellow, black): 

/* Firefox 3.6~15 */ 

background: -moz-radial-gradient(60% 55%, closest-side, blue, green, yellow, black): 
让 标准 语法 */ 

background: radial-gradient(closest-side at 60% 55%, blue. green, yellow, black):; 


radial-gradient0 标准 函数 应 该 放 在 各 私有 函数 的 后 面 
【示例 4】 下面 的 示例 模拟 了 太阳 初 升 的 效果 ， 如 图 14.30 所 示 。 设 计 径 向 渐变 中 心 点 位 于 左下 角 ， 半 
径 为 最 大 化 显示 ， 定 义 3 个 色 点 ， 第 一 个 色 点 设计 太阳 效果 ， 第 二 个 色 点 设计 太阳 余晖 ， 第 三 个 色 点 设计 
太空 ， 第 一 个 色 点 和 第 二 色 点 距离 为 60 像素 
#demo { 
height: 200px: 
/* Safari 5.1~6.0 */ 
background: -webkit-radial-egradient(left bottom, farthest-side, #f00, #f99 60px, #005): 
/* Opera 11.6~12.0 */ 
background: -0-radial-gradient(left bottom, farthest-side, #f00. #f99 60px, #005); 
/* Firefox 3.6~15 */ 
Ree a bottom, farthest-side. #f00., #f99 60px. #005): 
让 标准 语法 
ei si at left bottom, #H00. #f99 60px. #005); 


-| 
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© [© localhost8080/mysite/test3 ntml 
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图 14.29 设计 最 小 限度 的 径 向 渐变 效果 图 14.30 模拟 太阳 初 升 效果 


【示例 5】 下面 的 示例 模拟 了 太阳 的 效果 ， 如 图 14.31 所 示 。 设 计 径 向 渐变 中 心 点 位 于 对 象 中 央 ， 定 义 
第 一 个 色 点 设计 太阳 效果 ， 第 二 个 色 点 设计 背景 ， 两 个 色 点 位 置 相同 。 
<style type="text/css"> 
body { background: hsla(207. 59%. 78%. 1.00) } 
#demo { 
height: 200px; 
width: 300px: 
margin: auto: 
* Safari 5.1~6.0 */ 
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background: -Webkit-radial-gradient(center circle. #f00 SO0px. #ffF 50px): 
位 Opera 11.6~12.0 */ 
background: -o-radial-gradient(center circle, #f00 50px. #ffF 50px): 
/* Firefox 3.6~15 */ 
background: -moz-radial-gradient(center, circle. #f00 50px. #ffF 50px): 
证 标准 语法 */ 
background: radial-gradient(circle at center. #f00 50px, #fff 50px): 
3 
</style> 
<div id="demo"></div> 
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图 14.31 设计 太阳 效果 


14.2.8 定义 重复 径 向 渐变 


使 用 repeating-radial-gradient() 函数 可 以 定义 重复 线性 渐变 ， 用 法 与 radial-gradientO 函数 相同 ， 用 户 可 


以 参考 上 面 的 说 明 。 


【示例 1】 下 面 的 示例 设计 了 三 色 重复 显示 的 径 向 渐变 ， 效 果 如 图 14.32 所 示 。 


<style type="text/css"> 
#demo { 
height: 200px: 
/* Safari 5.1~6.0 */ 
background: -webkit-repeating-radial-gradient(red. yellow 10%, green 15%); 
* Opera 11.6~12.0 */ 
background: -0-repeating-radial-eradient(red. yellow 10%. green 15%): 
/* Firefox 3.6~15 */ 
background: -moz-repeating-radial-eradient(red., yellow 10%. green 15%): 


卢 标 准 语法 */ 

background: repeating-radial-gradient(red. yellow 10%. green 15%): 
} 
</style> 


<div id="demo"></div> 


【示例 2】 使 用 径 向 渐变 同样 可 以 创建 条 纹 背 景 ， 方 法 与 线性 渐变 类 似 。 
变 条 纹 背 景 ， 效 果 如 图 14.33 所 示 。 
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下 面 的 示例 设计 了 圆 形 径 向 浙 


区 V7 ( 微 课 精 编 版 ) 
be 


#demo { 


height: 200px: 

/* Safari 5.1~6.0 */ 

background: -webkit-repeating-radial-egradient(center bottom. circle, #00a340. #00a340 20px. #d8ffe7 20px. #d8ffe7 40px); 
/* Opera 11.6~12.0 */ 

background: -0-repeating-radial-eradient(center bottom, circle, #00a340., #00a340 20px, #d8ffe7 20px, #d8ffe7 40px); 
/* Firefox 3.6~15 */ 

background: -moz-repeating-radial-eradient(center bottom, circle, #00a340, #00a340 20px. #d8ffe7 20px, #d8ffe7 40px):; 
店 标 准 语法 */ 

background: repeating-radial-gradient(circle at center bottom, #00a340, #00a340 20px, #d8ffe7 20px, #d8ffe7 40px); 


图 14.32 设计 重复 显示 的 径 向 渐变 效果 图 14.33 设计 圆 形 径 向 渐变 条 纹 背 景 效 果 
4. 2.9 案例 : 设计 网 页 背景 色 
【示例 1 为 页 面倒 加 多 个 径 向 渐变 背景 ， 可 以 营造 虚幻 的 页 面 氛 围 。 本 示例 代码 如 下 ， 预 览 效 果 如 图 
i 34 所 示 
<style type="text/css"> 
html, body{ height: 100%; } 


body { 


background-color: #4B770A; 

background-image: 
radial-gradient(rgba(255, 255. 255. 0.3). reba(255., 255. 255. 0)). 
Tadial-gradient(at 10% 5%. rgba(255. 255. 255. 0.1). reba(255. 255. 255. 0) 20%). 
radial-gradient(at left bottom. rgba(255. 255. 255. 0.2). rgba(255. 255. 255. 0) 20%). 
radial-gradient(at right top. rgba(255. 255. 255. 0.2). rgba(255. 255. 255. 0) 2090). 
radial-gradient(at 85% 90%, rgba(255, 255. 255, 0.1). Teba(255. 255. 255. 0) 20%): 


} 
</style> 
在 上 面 的 示例 代码 中 ， 首 先 设计 body 高 度 满 屏 显 示 ， 避 人 免 无 内 容 时 看 不 到 效果 ; 然后 为 页 面 定 义 一 个 


| 基本 色 剂 B770A; 再 设计 5 个 径 向 渐变 ， 分 别 散布 于 页 面 四 个 顶 角 ， 以 及 中 央 位 置 ， 同 时 定义 径 向 渐变 的 


| 第 一 个 颜色 为 半 透明 的 白色 ， 第 二 个 颜色 为 透明 色 ， 从 而 在 页 面 不 同位 置 蒙 上 轻重 不 一 的 白色 效果 ， 以 此 
| 来 模拟 虚幻 莫 测 的 背景 效果 。 

| 【示例 2】 为 页 面 大 加 4 个 径 向 渐变 背景 设计 密密麻麻 的 针脚 纹理 效果 。 本 示例 代码 如 下 ,预览 效 果 
| 如 图 14.35 所 示 。 
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<style type="text/css"> 
html. body{ height: 100%:; } 
body { 
background-color: #282828:; 
background-image: 
-webkit-radial-gradient(black 15%. transparent 16%), 
-Webkit-radial-gradient(black 15%, transparent 16%), 
-webkit-radial-gradient(reba(255, 255, 255, 0.1) 15%, transparent 20%), 
-webkit-radial-gradient(reba(255, 255. 255, 0.1) 15%, transparent 20%); 
background-image: 
Tadial-gradient(black 15%, transparent 16%). 
Tadial-gradient(black 15%, transparent 16%), 
Tadial-gradient(Tgba(255, 255, 255, 0.1) 15%, transparent 20%). 
Tadial-gradient(rgba(255. 255, 255, 0.1) 15%,. transparent 20%): 
background-position: 


0 Opx, 
8px 8px, 
0 1px, 
8px PX: 
background-size: 16px 16px: 
} 
</style> 


j 


图 14.34 设计 多 个 径 向 渐变 背景 效果 图 14.35 设计 针脚 纹理 背景 效果 


在 上 面 的 示例 中 ， 首 先 使 用 background-size: 16px 16px; 定义 背景 图 大 小 为 16 像素 x 16 像素 ; 在 这 块 
小 图 上 设计 4 个 径 向 渐变 ， 包 括 两 个 深 色 径 向 渐变 和 两 个 浅 色 径 向 渐变 ; 使 用 background-position: 0 0px， 
8px 8px，0 lpx，8px 9px; 设计 一 深 、 一 浅 径 向 渐变 错位 丢 加 , 在 y 轴 上 错位 1 个 像素 ， 从 而 在 16 像素 x 
16 像素 大 小 的 浅 色 背景 图 上 设计 两 个 深 色 凹陷 效果 ; 最 后 ,借助 背 景 图 平 铺 ， 为 网 页 设计 上 述 纹理 特效 


14.2.10 ”案例 : 设计 图 标 


本 节 示 例 通过 CSS3 径 向 渐变 制作 圆 形 图 标 特效 ， 设 计 效 果 如 图 14.36 所 示 。 在 内 部 样式 表 中 ， 使 用 | 
radial-gradient() 函数 为 图 标 类 样式 定义 径 向 渐变 背景 ,设计 立 体 效果 ; 使 用 border-radius: 50%; 声明 定义 图 ， 
标 显 示 为 圆 形 ; 使 用 box-shadow 属性 为 图 标 添加 投影 ; 使 用 text-shadow 属性 为 图 标 文 本 定义 润 边 效 果 ; 使 | 
用 radial-gradient 设计 环形 径 向 渐变 效果 ， 为 图 标 添 加 高 亮 特效 。 
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图 14.36 设计 径 向 渐变 图 标 效果 
示例 主要 代码 如 下 。 


| 
| 
| <style type="text/css"> 
| :icon { 
| 让 固定 大 小 ， 可 根据 实际 需要 酌情 调整 ， 调 整 时 应 同步 调整 line-height: 60px: */ 
| width: 60px: height: 60px: 
| 店 行 内 块 显示 ,统一 图 标 显 示 属性 */ 
| display: inline-block: 
| 证 清除 边框 ， 避 免 边 框 对 整体 特效 的 破坏 */ 
| border: none; 
记 设 计 轩 形 效果 */ 
border-radius: 50%; 
| 让 定义 图 标明 影 ， 将 第 一 个 外 阴影 设计 为 立体 效果 ， 将 第 二 个 内 阴影 设计 为 高 亮 特效 */ 
| box-shadow: 0 1px Spx rgba(255, 255, 255, .5) inset, 
| 0 -2px 5px rgba(0. 0, 0, .3) inset, 0 3px 8px rgba(0. 0. 0, .8): 
| 店 定 义 径 向 渐变 ， 模 拟 明 暗 变 化 的 表面 效果 */ 
| background: -webkit-radial-gradient(circle at top center, #f28fb8, #e982ad, #ec568c); 
| background: radial-gradient(circle at top center, #f28fb8. #e982ad, #ec568c); 
| 入 定义 图 标 字体 样式 */ 
| font-size: 32pX: 
| color: #dd5183; 
| text-align: center:; 片 文本 水 平 居 中 显示 */ 
| line-height: 60px: 上 证 文本 垂直 居中 显示 ， 必 须 与 height: 60px: 保持 一 致 4/ 
| 让 为 文本 添加 阴影 ， 将 第 一 个 阴影 设计 为 立体 效果 ,将 第 二 个 阴影 定义 为 高 亮 特 效 */ 
| text-shadow: 0 3px 10px #f1a2c1, 
| 0 -3px 10px #f1a2cl:; 
| 
| 
| 
| 
| 


</style> 

<div class="icon">Dw</div> 
<span class="icon">Fl</span> 
<p class="icon">PS</p> 
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14.3 案例 实战 
本 节 将 通过 多 个 较 复 杂 的 案例 练习 背景 样式 的 实际 应 用 。 


14.3.1 设计 优惠 券 
本 节 示例 使 用 径 向 渐变 设计 一 张 优惠 券 效果 ， 如 图 14.37 所 示 。 具 体 代码 解析 请 扫 码 学 习 。 


EIEIEISEEC Sonos | 


图 14.37 设计 优惠 券 效 果 


线 上 阅读 | 


14.3.2 ”设计 桌面 纹理 背景 


本 节 示 例 使 用 CSS3 线性 渐变 属性 制作 纹理 图 案 ， 主 要 利用 多 重 背景 进行 设计 ， 然 后 使 用 线性 渐变 绘制 | 
每 一 个 小 方块 的 线条 效果 ， 通 过 和 春 加 和 平 铺 ， 完 成 重复 性 纹理 背景 效果 ， 如 图 14.38 所 示 。 具 体 代码 解析 请 
扫 码 学 习 。 | 


图 14.38 定义 网 页 纹理 背景 效果 


14.3.3 ”设计 按钮 


本 节 提 供 了 两 个 经 典 案例 ， 分 别 介绍 了 不 同 风格 的 按钮 样式 设计 ， 效 果 如 图 14.39 和 图 14.40 所 示 。 具 | 
体 代码 解析 请 扫 码 学 习 。 
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CD 
eR 
be 


x sx x 
Be Se SE 
使 用 线性 渐变 设计 立体 动态 按 锯 效 果 设计 立 使 用 线性 渐变 设计 立体 动态 按 铀 效果 


是 


(a ) 默认 从 上 到 下 渐变 (b ) 鼠标 经 过 从 下 到 上 渐变 (c ) 激活 时 下 移 1 像素 
图 14.39 ”设计 按钮 效果 


[DD locabosVmysitefiestht x 


图 14.40 设计 精致 的 按钮 


14.3.4 ”渐变 特殊 应 用 场景 


线 上 阅读 
渐变 可 以 用 在 包括 border-image-source 、background-image 、list-style-image 、cursor 等 的 属性 上 ， 用 来 
取代 url 属性 值 。 前 面 各 节 主 要 针对 background-image 属性 进行 了 介绍 ， 本 节 结 合 示例 介绍 其 他 属性 的 应 用 
情形 。 详 细 代 码 解 析 请 扫 码 学 习 
回 定义 渐变 效果 的 边框 
回 定义 填充 内 容 效果 
回 ”定义 列表 图 标 


14.3.5 设计 栏目 折 角 效果 


灵活 使 用 CSS3 渐变 背景 ， 可 以 创作 出 很 多 新 颖 的 设计 作品 。 例 如 ， 设 计 缺 角 和 补 角 效 果 ， 如 图 14.41 
和 图 14.42 所 示 


Ma) ©- veerocahoctareomm ~ a | Bratton 


W3C 发 布 HTMLS 的 正式 推荐 标准 


图 14.41 设计 缺 角 栏目 效果 图 14.42 ”设计 补 角 栏 目 效果 


.402 。 


第 ]4 章 使 用 CSS3 修饰 普 景 一 一 二 


设计 折 角 边框 和 缺 角 边框 效果 ， 如 图 14.43 和 图 14.44 所 示 。 
详细 代码 解析 请 扫 码 学 习 。 


5 的 正式 推荐 标准 


式 尖 布 了 HTML5 的 正式 


图 14.43 设计 折 角 边框 栏目 效果 图 14.44 设计 缺 角 边 框 栏目 效果 


14.4 在 线 练 习 


在 线 练 习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTMLS5 设计 背景 样式 。 感 兴趣 的 读者 可 以 扫 码 
练习 
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〈 勋 ! 视频 讲解 : 36 分 钟 ) 


2015 年 4 月 ，W3C 的 CSS 工作 组 发 布 了 CSS 基本 用 户 接口 模块 (CSS Basic User 
Interface Module Level 3，CSS3 UI ) 的 标准 工作 草案 。 该 文档 描述 了 CSS3 中 对 HIML、 
XML 进行 样式 处 理 所 需 的 与 用 户 界 面相 关 的 CSS 选择 器 、 属 性 及 属性 值 。 该 模块 负责 
控制 与 用 户 接 口 界面 相关 效果 的 呈现 方式 ， 它 包含 并 扩展 了 在 CSS2 及 Selector 规范 中 
定义 的 与 用 户 接口 有 关 的 特性 。 


【学 习 重 点 】 

MI 了 解 常 用 界面 显示 属性 。 
WI 能 够 定义 轮 廊 样式 。 

P| 正确 设计 边框 图 像样 式 。 
了 灵活 设计 圆 角 样式 。 

PI 灵活 设计 阴影 样式 。 


第 15 章 使 用 CSS3 美 化 界面 样式 


15.1 有 界面 显示 


下 面 介绍 CSS3 用 户 界 面 的 显示 方式 、 调 整 尺寸 缩放 比例 问题 。 


15.1.1 显示 方式 


- 般 浏览 器 都 支持 两 种 显示 模式 : 怪异 模式 和 标准 模式 。 在 怪异 模式 下 ，border 和 padding 包含 在 
width 或 height 之 内 ; 在 标准 模式 下 ，border、padding 、width 或 height 是 各 自 独 立 区 域 。 

为 了 兼顾 这 两 种 解析 模式 ，CSS3 定义 了 box-sizing 属性 ， 该 属性 能 够 定义 对 象 尺寸 的 解析 方式 。box- | 
sizing 属性 的 基本 语法 如 下 。 


box-sizing: content-box | border-box: 


取 值 简单 说 明 如 下 。 | 
回 ceontent-box: 为 默认 值 ，padding 和 border 不 被 包含 在 定义 的 width 和 height 之 内 。 对 象 的 实际 宽 
度 等 于 设置 的 width 值 和 border、padding 之 和 ， 即 元 素 的 宽度 = width + border + padding。 | 

回 borderbox: padding 和 border 被 包含 在 定义 的 width 和 height 之 内 。 对 象 的 实际 宽度 就 等 于 设置 的 | 
width 值 ， 即 使 定义 有 border 和 padding 也 不 会 改变 对 象 的 实际 宽度 ， 即 元 素 的 宽度 = width 。 | 

【示例 】 下 面 的 示例 设计 了 两 个 相同 样式 的 盒子 ， 在 怪异 模式 和 标准 模式 下 比较 显示 效果 如 图 15.1 | 

所 示 。 | 
<style type="text/css"> | 


div{ 
float: left: 伴 并 列 显示 */ 
height: 100px: 此 元 素 的 高 度 所 
width: 100px: 刻 元 素 的 宽度 */ 
border: 50px solid red: 启 边 框 */ 
margin: 10px: 上 # 外 边 距 所 / 
padding: 50px: 谍 内 边 距 *#/ 

对 

.border-box { box-sizing: border-box: } * 怪异 模式 解析 */ 

<div> 标准 模式 </div> 


| 
| 

| 

| 

| 

| 

| 

| 

| 

| 

</style> | 
| 

<div class="border-box"> 怪异 模式 </div> | 
| 

| 

| 

| 

| 

| 

| 

| 

| 


图 15.1 标准 模式 和 怪异 模式 解析 比较 
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| 从 图 15.1 中 可 以 看 到 ， 在 怪异 模式 下 width 属性 值 就 是 指 元 素 的 实际 宽度 ， 即 width 属性 值 中 包含 
| padding 和 border 属性 值 。 


15.1.2 调整 尺寸 


Note 
| 为 了 增强 用 户 体验 ，CSS3 增加 了 resize 属性 ， 允 许 用 户 通 过 拖 动 的 方式 改变 元 素 的 尺寸 。resize 属性 
| 的 基本 语法 如 下 。 
Tesize: none | both | horizontal | vertical | inherit: 


none: 为 默认 值 ， 不 允许 用 户 调整 元 素 大 小 。 

both: 用 户 可 以 调节 元 素 的 宽度 和 高 度 。 

horizontal: 用 户 可 以 调节 元 素 的 宽度 

vertical: 用 户 可 以 调节 元 素 的 高 度 。 

inherit: 表示 继承 祖先 元 素 的 值 。 

目前 除了 正 浏览 器 外 ， 其 他 主流 浏览 器 都 基本 支持 该 属性 

【示例 】 下 面 的 示例 演示 了 如 何 使 用 resize 属性 设计 可 以 自由 调整 大 小 的 图 片 ， 如 图 15.2 所 示 ， 


<style type="text/css"> 
#resize { 
谨 以 背景 方式 显示 图 像 这样 可 以 更 轻松 地 控制 缩放 操作 */ 
background: url(images/1.jpg) no-repeat center: 
锋 设 计 背 景 图 像 仅 在 内 容 区 域 显示 ， 留 出 补 白 区 域 */ 
background-clip: content: 
族 设 计 元 素 最 小 和 最 大 显示 尺寸 ， 用 户 只 能 够 在 该 范围 内 自由 调整 图 片 大 小 */ 
width: 200px: height: 120px; 
max-width: 800px; max-height: 600px: 
padding: 6px: border: 1px solid red: 
证 必须 同时 定义 overflow 和 resize. 否则 resize 属性 声明 无 效 ， 元 素 默认 溢出 显示 为 visible*/ 
Tesize: both; 
overflow: auto: 


| 取 值 简单 说 明 如 下 。 


图 图 图 罗 加 


| 
| 

| 

| 

| 

| 

| 

| 

| 4 

| </style> 
| <div id="resize"></div> 
| 

| 

| 

| 

| 

| 

| 

| 

| 

中 

| 


| (a) 默认 大 小 (b ) 鼠标 拖 动 放大 
图 15.2 调整 元 素 尺寸 
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15.1.3 ”缩放 比例 


动 ， 


0.5; 表示 缩小 一 半 。 


zoom 是 正 的 专 有 属性 ， 用 于 设置 对 象 的 缩放 比例 ， 另 外 它 还 可 以 触发 正 的 haslayout 
清除 margin 重 僵 等 ， 设 计 师 常用 这 个 属性 解决 正 浏览 器 存在 的 布局 Bug。 
CSS3 支持 该 属性 ， 基 本 语法 如 下 。 


Zoom: normal | <number> | <percentage> 


取 值 说 明 如 下 。 

回 normal: 使 用 对 象 的 实际 尺寸 。 

回 <number>: 用 浮 点 数 来 定义 缩放 比例 ， 不 允许 负 值 。 

回 <percentage>: 用 百分比 来 定义 缩放 比例 ， 不 允许 负 值 。 
目前 ， 除 了 Firefox 浏览 器 之 外 ， 所 有 主流 浏览 器 都 支持 该 属性 。 


属性 ， 


【示例 】 下 面 的 示例 使 用 了 zoom 放大 第 2 幅 图 片 为 原来 的 2 倍 ， 比 较 效 果 如 图 15.3 所 示 。 


<style type="text/css"> 
img { 
height: 200px; 
margin-right: 6px; 
} 
img.zoom { zoom: 2; } 
</style> 
<img src="images/bg.jpg"/> 
<img class="zoom" src="images/bg.jpg"/> 


图 15.3 放大 图 片 显 示 尺 寸 
当 zoom 属性 值 为 1.0 或 100% 时， 相当 于 normal, 表示 不 缩放 。 小 于 1 的 正 数 ， 表 示 缩 小 ， 如 zoom: 


15.2 轮 廊 样式 
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轮廓 与 边框 不 同 ， 它 不 占用 空间 ， 且 不 一 定 是 和 矩形。 轮廓 属于 动态 样式 ， 只 有 当 对 象 获取 焦点 或 者 被 ， 


a 人 [7Hss 各色 Wet 开发 从 入 门 到 茜 适 ( 航 神 亲信 县 ) 
这 和 


| 激活 时 呈现 ， 如 按钮 、 活 动 窗 体 域 、 图 形 地 图 等 周围 添加 一 圈 轮 廓 线 ， 使 对 象 突出 显示 。 


15.2.1 定义 轮廓 


outline 属性 可 以 定义 块 元 素 的 轮廓 线 ， 该 属性 在 CSS2.1 规范 中 已 被 明确 定义 ， 但 是 并 未 得 到 各 主流 浏 


| 览 器 的 广泛 支持 ，CSS3 增强 了 该 特性 。outline 属性 的 基本 语法 如 下 。 


outline: <'outline-width> || <'outline-style> || <'outline-color> || <'outline-offset> 


取 值 简单 说 明 如 下 。 

回 <outline-width>: 指定 轮廓 边框 的 宽度 。 

回 <outline-style>: 指定 轮廓 边框 的 样式 。 

回 <outline-color>: 指定 轮廓 边框 的 颜色 。 

回 <outline-offset>: 指定 轮廓 边框 偏 移 值 。 

注意 ，outline 创建 的 轮廓 线 是 画 在 一 个 枉 “ 上 面 "， 也 就 是 说 ， 轮 廓 线 总 是 在 项 上 ， 不 会 影响 该 框 或 任 


| 何其 他 框 的 尺寸 。 因 此 ， 显 示 或 不 显示 轮廓 线 不 会 影响 文档 流 ， 也 不 会 破坏 网 页 布局 。 


轮廓 线 可 能 是 非 矩形 的 。 例 如 ， 如 果 元 素 被 分 割 在 好 几 行 ,那么 轮廓 线 就 至 少 是 能 包含 该 元 素 所 有 框 


| 的 外 廓 。 和 边框 不 同 的 是 ， 外 廓 在 线 框 的 起 始 端 都 不 是 开放 的 ， 它 总 是 完全 闭合 的 。 


【示例 】 下 面 的 示例 设计 了 当 文 本 框 获 得 焦点 时 ， 在 周围 画 一 个 粗 实 线 外 廓 ， 提 醒 用 户 交 互 效果 ， 效果 
如 图 15.4 所 示 。 


<style type="text/css"> 

让 统一 页 面 字 体 和 大 小 */ 

body { 
font-family: "Lucida Grande", "Lucida Sans Unicode". Verdana. Arial. Helvetica, sans-serif: 
font-size: 12px: 


} 
让 清除 常用 元 素 的 边界 、 补 白 、 边 框 默认 样式 */ 
Pp. hl. form, button { border: 0: margin: 0: padding: 0: } 
谨 定 义 一 个 强制 换行 显示 类 */ 
.Spacer { clear: both: height: 1px: } 
族 定 义 表单 外 框 样式 */ 
myform {margin: 0 auto: width: 400px: padding: 14px: } 
族 定 制 当 前 表单 样式 */ 
#stylized { border: solid 2px #b7ddf2: background: #ebf4fb: } 
让 设计 表单 内 hl 和 op 通用 样式 效果 */ 
#stylized hl {font-size: 14px: font-weight: bold: margin-bottom: 8px: } 
#stylized p { 
font-size: 11px: color: #666666: 
margin-bottom: 20px: padding-bottom: 10px: 
border-bottom: solid 1px #b7ddf2: 


} 

#stylized label {/* 定义 表单 标签 样式 */ 
display: block: width: 140px: 
font-weight: bold: text-align: right: 
float: left: 
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六 定义 小 字体 样式 类 */ 

#stylized .small { 
color: #666666: font-size: 11px: font-weight: normal: text-align: right: 
display: block: width: 140px: 

} 

证 统一 输入 文本 框 样式 */ 

#stylized input { | 
float: left: | 
font-size: 12px; 
padding: 4px 2px: margin: 2px 0 20px 10px: 
border: solid 1px #aacfe4; width: 200px: 


} 

此 定义 图 形 化 按钮 样式 */ | 

#stylized button { | 
clear: both: | 
margin-left: 150px:; 
width: 125px: height: 31px; 
background: #666666 url(images/button.png) no-repeat: | 
text-align: center: line-height: 31px: color: #FFFFFF:; font-size: 11px; font-weight: bold; 


] 
族 设 计 表单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 时 ， 轮 廓 线 的 宽 、 样 式 和 颜色 */ | 
input: focus, button: focus { outline: thick solid #b7ddf2 } | 
input: active, button: active 《outline': thick solid #aaa } | 
</style> 
<div id="stylized" class="myform"> | 
<form id="form1" name="forml" method="post" action=""> | 
<hl> 登录 </hl> | 
<p> 请 准确 填写 个 人 信息 .</p> 
<label>Name <span class="small"> 姓名 </span> </label> | 
<input type="text" name="textfield" id="textfield" /> | 
<label>Email <span class="small"> 电子 邮箱 </span> </label> | 
<input type="text" name="textfield" id="textfield" /> 
<label>Password <span class="small"> 密码 </span> </label> 
<input type="text" name="textfield" id="textfield" /> 
<button type="submit"> 登录 </button> 
<div class="spacer"></div> 
</form> 
</div> 
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(a ) 默认 状态 (b ) 激活 状态 
图 15.4 设计 文本 框 的 轮廓 线 
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| ” 
| 1 2 
| 15.2.2 设计 轮廓 线 
| 
| CSS3 为 轮廓 定义 了 很 多 属性 ， 使 用 这 些 属 性 可 以 设计 轮廓 线 样式 。 
| 工 设置 宽 诬 
te outline-width 属性 可 以 设置 轮廓 线 的 宽度 。 基 本 语法 如 下 。 

| outline-width: <length> | thin | medium | thick 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


取 值 简单 说 明 如 下 。 

回 thin: 定义 细 轮 廓 。 

回 medium: 定义 中 等 轮廓 ， 为 默认 值 。 

回 thick: 定义 粗 轮 廓 。 

回 <length>: 定义 轮廓 粗细 的 值 。 

注意 ， 只 有 当 轮 廓 样式 不 是 none 时 ， 该 属性 才 会 起 作用 。 如 果 样 式 为 none， 宽 度 实际 上 会 重 置 为 0。 
人 

.设置 样式 

ea 属性 可 以 设置 轮廓 线 的 样式 。 基 本 语法 如 下 。 

outline-style: none | dotted | dashed | solid | double | groove | Tidge | inset | outset 


取 值 简单 说 明 如 下 。 

none: 无 轮廓 ， 为 默认 值 。 

dotted: 点 状 轮廓 。 

dashed: 虚线 轮廓 。 

solid: 实 线 轮 廓 。 

double: 双 线 轮廓 。 两 条 单线 与 其 间隔 的 和 等 于 指定 outline-width 值 。 
groove: 3D 凹 槽 轮廓 。 

ridge: 3D 凸 槽 轮廓 。 

inset: 3D 凹 边 轮廓 。 

outset: 3D 凸 边 轮 廓 。 

3. 设置 颜色 

outline-color 属性 可 以 设置 轮廓 线 的 颜色 。 基 本 语法 如 下 。 


outline-color: <color> | invert 


罗 罗 办 办 办 办 办 办 的 


取 值 简单 说 明 如 下 。 

<color>: 指定 颜色 。 

回 invert: 使 用 背景 色 的 反 色 。 该 参数 值 目前 仅 在 正 及 Opera 下 有 效 。 
4. 设置 偏 移 

outline-offset 属性 可 以 设置 轮廓 线 的 偏 移 位 置 。 基 本 语法 如 下 。 
outline-offset: <length> 


长 度 值 来 定义 轮廓 偏 移 ， 人 允许 负 值 ， 默 认 值 为 0。 
【示例 1】 在 上 节 示 例 的 基础 上 ， 通 过 outline-offset 属性 放大 轮廓 线 ， 使 其 看 起 来 更 大 方 ， 演 示 效 果 如 
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<style type="text/css"> 

谨 设 计 表单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 时 ， 轮 廓 线 的 宽 、 样 式 和 颜色 */ 

input: focus. button: focus { outline: thick solid #b7ddf2 } 

input: active, button: active 《outline: thick solid #aaa } 

谨 通 过 outline-offset 属性 放大 轮廓 线 */ | 

input: active, button: active { outline-offset: 4px: } | 

input: focus, button: focus { outline-offset: 4px: } | 

</style> | 

<div id="stylized" class="myform"> | 
| 
| 
| 


| 
图 15.5 所 示 。 下 面 的 代码 仅 显示 局 部 CSS 样式 ,完整 示例 样式 和 结构 请 参考 上 节 示 例 代码 。 | 


<form id="form1" name="forml" method="post" action=""> 
<hl> 登录 </h1> 


$4 3 C [D localhost/mysite/test.html 妆 韦 加 三 


所 3 C [Dlocalhost/mysite/testhtml 六 外 加 三 


尾 录 
人 


(a ) 激活 状态 


图 15.5 放大 激活 和 焦点 提示 框 
【示例 2】 下 面 的 示例 为 段落 文本 中 的 部 分 文字 定义 轮廓 线 ， 演 示 效 果 如 图 15.6 所 示 
<style type="text/css"> 
:outline { outline: red solid 2px: } 
</style> | 


<p><b> 注释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ,<span class="outline">Internet Explorer 8 ( 以 及 更 高 版 本 ) </ | 
span> 才 支 持 outline 属性 。</p> 


x 


| 
| 
| 
| 
IE 念 ntpy/ilocalhosvm P ~ 引 
| 
| 
I 
| 


图 15.6 轮廓 边框 效果 | 
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15.3 边框 样式 


边框 是 CSS 盒 模型 重要 的 组 成 部 分 ， 本 节 将 介绍 CSS3 增强 的 边框 样式 ， 包 括 图 像 边 框 和 圆 角 边框 。 


回 
权威 参考 


15.3.1 定义 边框 图 像 源 


CSS3 新 增 的 border-image 属性 能 够 模拟 background-image 属性 功能 ， 且 功能 更 加 强大 ， 该 属性 的 基本 


border-image: <' border-image-source > || < border-image-slice > [/< border-image-width > | /< border-image-width >? /< 
border-image-outset > ]? || <’ border-image-repeat > 


取 值 说 明 如 下 。 

回 < borderinmage-source >: 设置 对 象 的 边框 是 用 图 像 定 义 样式 还 是 用 图 像 来 源 路 径 定义 样式 。 

回 <' borderimage-slice'>: 设置 边框 图 像 的 分 割 方式 。 

回 <'border-image-width >: 设置 对 象 的 边框 图 像 宽 度 。 

回 <'border-image-outset'>: 设置 对 象 的 边框 图 像 的 扩展 。 

回 <'border-image-repeat'>: 设置 对 象 的 边框 图 像 的 平 铺 方式 。 

【示例 】 下 面 的 示例 为 元 素 div 定义 了 边框 图 像 ， 使 用 borderimage-source 导入 外 部 图 像 源 images/ 


| borderl.png， 根 据 border-image-slice 属性 ， 值 为 (27 27 27 27 )， 把 图 像 切 分 为 9 块 ， 然 后 分 别 把 这 九 块 图 


| 像 切 片 按 顺序 填充 到 边框 四 边 、 四 角 和 内 容 区 域 。 示 例 主 要 代码 如 下 ， 页 面 浏览 效果 如 图 15.7 所 示 。 


<style type="text/css"> 
div{ 
height: 160px: 
border: solid 27px: 
让 设置 边框 图 像 */ 
border-image: url(images/borderl .png) 27: 
上 
</style> 
<div></div> 


Dem B= 
€ 3 © [OochosUmeite/est im 


图 15.7 定义 边框 背景 样式 
在 上 面 的 示例 中 ,使 用 了 一 个 81px x 81px 大 小 的 图 像 ， 在 这 个 正方 形 的 图 像 中 ,被 等 分 了 9 个 方块 ， 


| 每 个 方块 的 高 和 宽 都 是 27px x 27px 大 小 。 当 声明 border-image-slice 属性 值 为 (27 27 27 27 ) 时 ， 则 按 下 面 
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的 说 明 进 行 解析 。 

回 第 一 个 参数 值 表示 从 上 向 下 载 切 图 像 ， 显 示 在 项 边 。 
加 ”第 二 个 参数 值 表示 从 右 向 左 裁 切 图 像 ， 显 示 在 右边 。 
回 第 三 个 参数 值 表 示 从 下 向 上 裁 切 图 像 ， 显 示 在 底 边 。 

加 ”第 四 个 参数 值 表示 从 左 向 右 裁 切 图 像 ， 显 示 在 左边 。 

图 像 被 4 个 参数 值 裁 切 为 9 块 ， 再 根据 边框 的 大 小 进行 自 适应 显示 。 例 如 ， 当 分 别 设置 边框 为 不 同 大 
小 ， 则 显示 效果 除了 粗细 之 外 ， 其 他 都 是 完全 相同 的 。 


| 
15.3.2 ”定义 边框 图 像 平 铺 方式 | 


border-image-repeat 属性 设置 对 象 的 边框 图 像 的 平 铺 方式 。 该 属性 的 基本 语法 如 下 。 
border-image-repeat: [ stretch | repeat | round | space ]{1. 2} 


取 值 简单 说 明 如 下 。 
回 streteh: 用 拉 伸 方式 来 填充 边框 图 像 ， 为 默认 值 。 | 
回 repeat; 用 平 储 方式 来 填充 边框 图 像 。 当 图 片 磁 到 边界 时 ， 如 果 超过 则 被 蕉 断 。 

回 round: 用 平 铺 方式 来 填充 边框 图 像 。 图 像 会 根据 边框 的 尺寸 动态 调整 图 像 的 大 小 直至 正好 可 以 铺 | 


满 整个 边框 。 
回 space: 用 平 鱼 方 式 来 填充 边框 图 像 。 图 像 会 根据 边框 的 尺寸 动态 调整 图 像 之 间 的 间距 直至 正好 可 | 
以 铺 满 整个 边框 。 | 


【示例 】 下 面 的 示例 以 上 节 示 例 为 基础 ， 设 置 边框 图 像 平 铺 显 示 : border-image-repeat: round; ， 演 示 效 | 
果 如 图 15.8 所 示 。 | 


<style type="text/css"> 

div{ 
height: 160px: 
background: hsla(93, 96%. 62%, 1.00): 
border: solid 27px red: 
证 设置 边框 图 像 源 */ 
border-image-source: Url(images/border1.png): 
铺设 置 边 框图 像 的 平 铺 方式 */ 
border-image-repeat: round: 

of 

</style> 


€ 3 © [® locahosta0e0/myste/ testhtml 


be 


图 15.8 ”定义 边框 图 像 平 铺 显示 | 
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| 15. 3.3 ”定义 边框 图 像 宽 度 


border-image-width 属性 设置 对 象 的 边框 图 像 的 宽度 。 该 属性 的 基本 语法 如 下 。 
border-image-width: [ <length> | <percentage> | <number> | auto ]{1. 4} 


取 值 简单 说 明 如 下 。 
回 <length>: 用 长 度 值 指定 宽度 ， 不 允许 负 值 。 
回 <percentage>: 用 百分比 指定 宽度 ， 参 照 其 包含 块 进行 计算 ， 不 允许 负 值 。 
回 <number>: 用 浮 点 数 指定 宽度 ， 不 允许 负 值 。 
回 auto: 如 果 auto 值 被 设置 ， 则 border-image-width 采用 与 border-image-slice 相同 的 值 。 
【示例 】 下 面 的 示例 以 上 节 示 例 为 基础 ， 设 置 边框 背景 平 铺 显示 : border-image-repeat: round; ， 图 像 宽 
为 500px， 演 示 效 果 如 图 15.9 所 示 。 
<style type="text/css"> 
div{ 
height: 160px: 
background: hsla(93, 96%, 62%, 1.00); 
border: solid 27px red: 
片 设置 边框 图 像 源 */ 
border-image-source: Url(images/borderl.png): 
店 设 置 边框 图 像 的 平 铺 方式 */ 
border-image-repeat: round: 
族 设 置 边 框图 像 的 宽度 六 
border-image-width: 500px: 


1 

</style> 

<div>border-image-source: url(images/borderl .png): <br> 
border-image-repeat: round:; <br> 
border-image-width: S00px: </div> 


gs-source; es pne), 


eee-width: S00pz; 


图 15.9 定义 边框 图 像 宽度 


| 
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| 
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| 
| border diress topsat 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


15.3.4 定义 边框 图 像 分 割 方式 


border-image-slice 属性 用 于 设置 对 象 的 边框 图 像 的 分 割 方式 。 该 属性 的 基本 语法 如 下 。 


.414 。 


第 15 章 使 用 CSS3 美 化 界面 样式 


取 值 简单 说 明 如 下 。 
回 <number>: 用 浮 点 数 指定 宽度 ， 不 允许 负 值 。 
回 ”<percentage>: 用 百分比 指定 宽度 。 参 照 其 包含 块 区 域 进行 计算 ， 不 允许 负 值 。 | 
回 他 1: 保留 裁 切 后 的 中 间 区 域 ， 其 铺 排 方式 遵循 < border-image-repeat > 的 设 定 。 Note 
【示例 】 下 面 的 示例 以 上 节 示 例 为 基础 ， 设 置 边 框 背景 平 铺 显 示 : border-image-repeat: round; ， 设 置 裁 

切 值 为 10: border-image-slice: 10; ， 演 示 效 果 如 图 15.10 所 示 。 | 


| 
| 
| 
| 
border-image-slice: [ <number> | <percentage> ]{1, 4} && fill? | 
| 
| 
| 
| 
| 


| 
| 
| 
<style type="text/css"> | 
div{ | 
height: 160px: | 
background: hsla(93, 96%, 62%, 1.00); | 
border: solid 27px red: | 
让 设置 边 框图 像 源 */ 
border-image-source: Url(images/border1.png): | 
铺设 置 边 框图 像 的 平 铺 方式 */ | 
border-image-repeat: round: | 
证 设置 边框 图 像 的 宽度 */ | 
border-image-width: S00px: | 
让 设置 边框 图 像 的 裁 切 值 为 10*/ | 
border-image-slice: 10: | 
} | 
</style> | 
<div>border-image-source: url(images/borderl .png); <br> | 
border-image-repeat: round: <br> 
border-image-slice: 10: </div> 


DD localhost8080/mysite/ x WW 
€ > C [© localhost8080/mysite/testhtml 


和 A 二 A 


order -image-source: url (images/borderl. png); 
order -image-repeat :round; 
border -image-width:500px; 


人 一 可 一 可 一 时 


图 15.10 定义 边框 图 像 裁 切 值 


15.3.5 ”定义 边框 图 像 扩 展 


border-image-outset 属性 设置 对 象 的 边框 图 像 的 扩展 。 该 属性 的 基本 语法 如 下 。 | 


.415 。 


gm HL7Hss 各 动 Wit 开 帮 以 入 门 到 精 遂 ( 攻 训 持久 版) 


border-image-outset: [ <length> | <number> ]{1. 4} 


取 值 简单 说 明 如 下 。 

回 <length>: 用 长 度 值 指定 宽度 ， 不 允许 负 值 。 

回 <number>: 用 浮 点 数 指定 宽度 ， 不 允许 负 值 。 

【示例 】 下 面 以 上 节 示 例 为 基础 ， 设 置 边框 背景 向 外 扩展 50px， 演 示 效 果 如 图 15.11 所 示 。 


<style type="text/css"> 

div{ 
height: 160px: 
margin: 60pX: 
background: hsla(93. 96%, 62%, 1.00); 
border: solid 27px red: 
让 设置 边框 图 像 源 */ 
border-image-source: Url(images/borderl.png): 
证 设置 边框 图 像 的 平 铺 方式 */ 
border-image-repeat: round: 
让 设置 边框 图 像 的 宽度 */ 
border-image-width: 500px: 
族 设 置 边框 图 像 的 裁 切 值 为 10*/ 
border-image-slice: 10; 
铺设 置 边 框图 像 向 外 扩展 50px*/ 
border-image-outset: SOpx: 


</style> 

<div>border-image-source: url(images/borderl .png): <br> 
border-image-repeat: round: <br> 
border-image-slice: 10; <br> 
border-image-outset: 50px; </div> 


€ 3 © [© locahost8080/mysite/testhtml 女 | : 


border-image-source: url (images/borderl. png); 
border-image-repeat:round; 
border-image-slice: 10; 


Yrvwrvwrry 


图 15.11 定义 边框 图 像 向 外 扩展 
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15.3.6 ”案例 : 应 用 边框 图 像 


下 面 结合 示例 介绍 border-image 在 页 面 中 的 应 用 。 
【示例 1】 下 面 的 示例 演示 了 如 何 设计 左下 和 右 下 圆 角 显 示 ， 演 示 效 果 如 图 15.12 所 示 。 


<style type="text/css"> 
div{ 
height: 120px: 
text-align: center: 
border-style: solid: 
border-width: 10px; 
border-image: url(images/r2.png) 20; 
} 
</style> 
<div>border-image: url(images/r2.png) 20; 图 像 源 效果 如 下 所 示 : <br> 
<img src="images/r2.png" /></div> 


【示例 2】 设计 完全 圆 角 边框 效果 。 设 计 圆 角 图 像 大 小 为 42px x 42px， 裁 切 半 径 为 20px， 


图 15.13 所 示 。 


<style type="text/css"> 
div{ 
height: 120pX: 
text-align: center: 
border-style: solid: 
border-width: 10px: 
border-image: url(images/r3.png) 20: 
1 
</style> 
<div>border-image: url(images/r3.png) 20: 图 像 源 效果 如 下 所 示 : <br> 
<img src="images/r3.png" /></div> 


[DY localheste000/myste, x WN 


€ > © [© localhosta080/mysite/test1 html |: } © |@ localhosta080/mysite/test2html 衣 | : 


border-image: “ 定 20; 图 像 济 效 条 如 下 所 示 : border-image: url(images/r3. ol 20; 图 像 源 效果 如 下 所 示 : 


图 15.12 ”定义 边框 局 部 圆 角 样式 图 15.13 定义 完全 圆 角 边框 样式 


【示例 3】 设计 阴影 特效 。 设 计 边框 图 像 大 小 为 42px x 42px， 显 示 效 果 如 图 15.14 所 示 。 
<style type="text/css"> 
img { 

height: 400px: 

border-style: solid: 

border-width: 2px SPX 6px 2px: 
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border-image: url(images/r4.pne) 2562: 
| 

</style> 

| <img src="images/2.jpg" /> 


” | 
Note | 【示例 4】 设计 选项 卡 。 设 计 边框 图 像 大 小 为 12px x 27px， 圆 角 半径 为 12px， 显 示 效 果 如 图 15.15 所 示 。 
<style type="text/css"> 
ul 
margin: 0; padding: 0: 
| list-style-type: none: 


| 
| if{ 
| width: 100px: height: 20px: 
| border-style: solid: 
| cursor: pointer' 
| float: left: 
| padding: 4px 0: 
| text-align: center: 
| border-width: Spx Spx Opx: 
| border-image: url(images/r5.png) 5 5 0: 
| a 
</style> 
| <u> 
| <li> 首页 <li> 
<li> 咨询 <4i> 
<li> 关于 </i> 
</ul> 


D localhosta000/mysine, x WN 


€ > © [© locahosts0a0/mysite/test3ntml 


| 图 15.14 定义 边框 阴影 样式 图 15.15 定义 选项 卡 样式 
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15.3.7 “定义 圆 角 边 框 
| 

CSS3 新 增 border-radius 属性 ， 使 用 它 可 以 设计 元 素 的 边框 以 圆 角 样 式 显 示 。borderradius 属性 的 基本 | 


语法 如 下 。 盟 
border-radius: [ <length> | <percentage> ]{1. 4} [/[ <length> | <percentage> ]11. 4} ]? Note 
取 值 简单 说 明 如 下 。 


回 <length>: 用 长 度 值 设置 对 象 的 圆 角 半径 长 度 ， 不 允许 负 值 。 

回 <percentage>: 用 百分比 设置 对 象 的 圆 角 半径 长 度 ， 不 允许 负 值 。 
为 了 方便 定义 4 个 顶 角 的 圆 角 ，border-radius 属性 派生 了 4 个 子 属性 。 
加 ”border-top-right-radius: 定义 右上 角 的 圆 角 。 

加 ”border-bottom-right-radius: 定义 右 下 角 的 圆 角 。 

加 ”border-bottom-left-radius: 定义 左下 角 的 圆 角 。 

回 border-top-left-radius: 定义 左上 角 的 圆 角 。 


次 提示: border-radius 属性 可 包含 两 个 参数 值 : 第 一 个 值 表示 国 角 的 水 平 半径 ， 第 二 个 值 表 示 圆 角 的 重 直 
半径 ， 两 个 参数 值 通 过 针线 分 隔 。 如 果 仅 包 含 一 个 参数 值 ， 则 第 二 个 值 与 第 一 个 值 相 同 ， 它 表 
示 这 个 角 就 是 一 个 四 分 之 一 圆 角 。 如 果 参 数值 中 包含 0， 则 这 个 角 就 是 矩形 ， 不 会 显示 为 国 角 。 
针对 border-radius 属性 参数 值 ， 各 种 浏览 器 的 处 理 方式 并 不 一 致 。 在 Chrome 和 Safari 浏 览 器 中 ， 
会 绘制 出 一 个 椭圆 形 边框 ， 第 一 个 半径 为 椭圆 的 水 平方 向 半径 ， 第 二 个 半径 为 椭 国 的 重 直 方向 
半径 。 在 Firefox 和 Opera 浏览 器 中 ， 将 第 一 个 半径 作为 边框 左上 角 与 右 下 角 的 圆 半径 来 绘制 ， 
将 第 二 个 半径 作为 边框 右上 角 与 左下 角 的 圆 半径 来 绘制 。 


【示例 1】 下 面 给 border-radius 属性 设置 一 个 值 : border-radius: 10px; ， 演 示 效 果 如 图 15.16 所 示 。 


<style type= "text/css"> 
img { 
height: 300px: 
border: 1px solid red: 
border-radius: 10px: 
| 
</style> 
<img src="images/1.jpg" /> 


如 果 为 border-radius 属性 设置 两 个 参数 ， 则 效果 如 图 15.17 所 示 。 
img { 

height: 300px: 

border: 1px solid red: 

border-radius: 20px/40px: 
» 
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图 15.16 “定义 贺 角 样式 图 15.17 定义 圆 角 样 式 


| 也 可 以 为 元 素 的 4 个 顶 角 定义 不 同 的 值 ， 实 现 的 方法 有 以 下 两 种 
| -种 是 利用 border-radius 属性 ， 为 其 赋 
| 则 ， 可 以 包含 2 个 、3 个 或 者 4 个 值 的 集合 。 但 是 此 时 无 法 使 用 斜 杠 方式 定义 圆 角 水 平和 垂直 半径 
| 如 果 是 4 个 值 ， 则 这 4 个 值 将 按照 top-left 、top-right、bottom-right、bottom-left 的 顺序 来 设置 
如 果 bottom-left 值 省 略 ， 那 么 它 等 于 top-right 
如 果 bottom-right 值 省 略 ， 那 么 它 等 于 top-left 
如 果 top-right 值 省 略 ， 那 么 它 等 于 top-left 
如 果 为 border-radius 属性 设置 4 个 值 的 集合 参数 ， 则 每 个 值 表示 每 个 角 的 圆 角 半径 
【示例 2】 下 面 的 示例 为 图 像 的 4 个 顶 角 定义 了 不 同 的 圆 角 半 径 ， 演 示 效 果 如 图 15.18 所 示 
img { 
height: 300px: 
border: 1px solid red: 
border-radius: 10px 30px 50px 70px: 
} 


-组 值 。 当 为 border-radius 属性 赋 一 组 值 ， 将 遵循 CSS 赋值 规 


如 果 为 border-radius 属性 设置 3 个 值 的 集合 参数 ， 则 第 一 个 值 表示 左上 角 的 圆 角 半径 ， 第 二 个 值 表示 


| 右上 角 和 左下 角 两 个 角 的 圆 角 和 第 三 个 值 表示 右 下 角 的 圆 角 半径 
| 如 果 为 border-radius 属性 设置 2 个 值 的 集合 参数 ， 则 第 一 个 值 表示 左上 角 和 右 下 角 的 圆 角 半径 ， 
| 个 值 表示 右上 角 和 左下 角 两 个 角 的 圆 角 半 径 。 


另 一 种 方法 是 利用 派生 子 属性 进行 定义 ， 如 border-top-right-radius 、border-bottom-right -radius 、border- 


Baten left-radius 和 border-top-left-radius 
意 ，Gecko 和 Presto 引擎 在 写法 上 存在 很 大 差异 
【示例 3】 下 面 的 代码 定义 了 div 元 素 右 上 角 为 50 像素 的 圆 角 ， 演 示 效 果 如 图 15.19 所 示 。 
img { 
height: 300px; 
| border: 1px solid red: 
| -moz-border-radius-topright: S0pX: 
-webkit-border-top-right-radius: SOpx: 
border-top-right-radius: S0pX: 
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图 15.18 分别 定 义 不 同 项 角 的 圆 角 样式 图 15.19 定义 某 个 顶 角 的 圆 角 样式 


15.3.8 ”案例 : 设计 椭圆 图 形 


使 用 border-radius 属性 设计 圆 角 时 ， 可 能 会 存在 下 面 几 种 情况 
回 如 果 响 的 角 的 两 个 相 邻 边 宽度 不 同 ， 那 么 这 个 圆 角 将 会 从 宽 的 一 边 圆滑 过 渡 到 窗 的 一 边 ， 即 
偏向 宽 边 的 圆 弧 略 大 ， 而 偏向 窗 边 的 圆 弧 略 小 
回 ”如果 两 条 边 宽度 相同 ,那么 圆 角 两 个 相 邻 边 呈 对 称 圆 弧 显 示 ， 即 相交 于 45° 的 对 称 线 上 
回 ”如 果 一 条 边 宽度 是 相 邻 另 一 条 边 宽度 的 两 佑 ， 那 么 两 边 圆 弧 线 交 的 30° 角 线 上 
border-radius 不 允许 圆 角 彼此 重 释 ， 当 相 邻 两 个 圆 角 的 半径 之 和 大 于 元 素 的 宽 或 高 时 ， 在 浏览 帘 中 会 呈 | 
现 为 椭圆 或 正 圆 效果 
【示例 】 下 面 的 代码 定义 了 img 元 素 显示 为 圆 形 ， 当 图 像 宽 高 比 不 同时 ， 显 示 效 果 不 同 ， 如 图 15.20 
所 示 
<style type="text/css"> 
img {/* 定义 图 像 圆 角 边框 */ 
border: solid 1px red: 
border-radius: 50%: /* 圆 角 */ 


} 

I1 他 定义 第 1 幅 图 像 的 宽 高 比 为 1: 1*/ 
width: 300pX: 
height: 300px; 


} 

-2 {+ 定义 第 2 幅 图 像 的 宽 高 比 不 为 1: 1*/ 
width: 300px: 
height: 200px; 


} | 
:3 {l* 定义 第 3 幅 图 像 的 宽 高 比 不 为 1: 1*/ | 


width: 300px: | 
height: 100px: | 
border-radius: 20px: /* 定义 圆 角 */ 

} 

</style> 


<img class="r1" src="images/1.jpg" title=" 圆 角 图 像 " /> | 
<img class="r2" src="images/1.jpg" title=" 椭圆 图 像 " /> | 


.421。 


名 7 eo 1 逆 名 条 二 上 ) 


<img class="r3" src="images/1.jpe" title=" 圆 形 图 像 " /> 


€ 5 四-| 参 TT 


图 15.20 定义 圆 形 显示 的 元 素 效果 


15.4 盒子 阴影 


CSS3 的 box-shadow 类 似 于 text-shadow， 不 过 text-shadow 负责 为 文本 设置 阴影 ， 而 box-shadow 负责 


| 给 对 象 定义 图 层 阴 影 效 果 


15.4.1 定义 盒子 阴影 


box-shadow 属性 可 以 定义 元 素 的 阴影 ， 基 本 语法 如 下 


box-shadow: none | inset? && <length>{2. 4} && <color>? 


取 值 简单 说 明 如 下 
none: 无 阴影 。 
回 inset: 设置 对 象 的 阴影 类 型 为 内 阴影 。 该 值 为 空 时 ， 则 对 象 的 阴影 类 型 为 外 阴影 
<length> 中: 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 ， 可 以 为 负 值 。 
<length> 四: 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偏 移 值 ， 可 以 为 负 值 。 
<length> (38): 如 果 提 供 了 第 3 个 长 度 值 则 用 来 设置 对 象 的 阴影 模糊 值 ， 不 允许 负 值 。 
<length> @: 如 果 提 供 了 第 4 个 长 度 值 则 用 来 设置 对 象 的 阴影 外 延 值 ， 可 以 为 负 值 。 
<color>: 设置 对 象 的 阴影 的 颜色 。 
下 面 结合 案例 进行 演示 说 明 。 
【示例 1】 下 面 的 示例 定义 了 一 个 简单 的 实 影 投 影 效 果 ， 演 示 效 果 如 图 15.21 所 示 。 
<style type="text/css"> 
img{ 

height: 300px; 


加 图 加 图 加 
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box-shadow: Spx Spx: 
} 
</style> 
<img src="images/1.jpg" /> 


【示例 2】 定 义 位 移 、 阴 影 大 小 和 阴影 颜色 ， 演 示 效 果 如 图 15.22 所 示 。 
img{ 

height: 300px: 

box-shadow: 2px 2px 10px #06C:; 
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图 15.21 定义 简单 的 阴影 效果 图 15.22 定义 复杂 的 阴影 效果 


【示例 3】 定义 内 阴影 阴影 大 小 为 10px， 颜 色 为 #06C， 演 示 效 果 如 图 15.23 所 示 


<style type="text/css"> 
pre{ 

padding: 26px: 

font-size: 24px: 

box-shadow: inset 2px 2px 10px #06C: 
} 
</style> 
<pre> 
-moz-box-shadow: inset 2px 2px 10px #06C: 
-webkit-box-shadow: inset 2px 2px 10px #06C: 
box-shadow: inset 2px 2px 10px #06C: 
</pre> 
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-moz-box-shadow: inset 2px 2px 10px #06C; 


-webkit-box-shadow: inset 2px 2px 10px #06C; 
box-shadow: inset 2px 2px 10px #06C; 


图 15.23 定义 内 阴影 效果 
【示例 4] 通过 设置 多 组 参数 值 定义 多 色 阴 影 ， 演 示 效果 如 图 15.24 所 示 。 
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a 7 4 节 各 本 二 大 


height: 300px: 
box-shadow: -10px 0 12px red, 
10px 0 12px blue, 


| 
| 
| 
| 
| img { 
| 
| 
| 
| 
| 0 -10px 12px yellow. 


| 0 10px 12px green: 
Note | } 
【示例 5】 通 过 多 组 参数 值 还 可 以 定义 渐变 阴影 演示 效果 如 图 15.25 所 示 。 
img{ 


box-shadow: 0 0 10px red, 
2px 2px 10px 10px yellow, 


| 
| 
| 
| height: 300px:; 
| 
| 
| 
| 4px 4px 12px 12px green: 
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图 15.24 定义 多 色 阴 影 效 果 图 15.25 定义 渐变 阴影 效果 


”0 注意 : 当 给 同一 个 元 素 设计 多 个 阴影 时 ， 最 先 写 的 阴影 将 显示 在 最 顶层 。 
| 15.4.2 ”案例 : box-shadow 的 应 用 

本 节 通 过 一 个 简单 的 示例 进一步 练习 box-shadow 属性 的 应 用 。 
第 1 步 , 设计 一 个 简单 的 盒子 ， 并 定义 基本 形状 。 

<style type="text/css"> 


:box{ 
width: 100px: height: 100px: 颇 固定 大 小 */ 
text-align: center: line-height: 100px: 上 # 显示 在 中 央 所 
background-color: rgba(255. 204. 0. .5): 庄 浅 色 背 景 */ 
border-radius: 10px: 人 # 适 当 圆 角 所 
| padding: 10px: margin: 10px: 上 # 添 加 间距 */ 
| } 
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</style> 
<div class="box bs1">box-shadow</div> 


和 边框 的 复制 ， 但 是 阴影 本 身 不 占据 布局 的 空间 ， 比 较 如 图 15.26 所 示 。 
:bsl {box-shadow: 120px Opx #ccc: } 
第 3 步 ， 四周 有 一 样 模糊 值 的 阴影 如 图 15.27 所 示 。 
.bsl{ box-shadow: 0 0 20px #666:; } 


所 请 [CETZRTRET3 | 


图 15.26 ”比较 对 象 和 阴影 大 小 图 15.27 四周 同时 显示 阴影 


第 4 步 , 定义 5px 扩展 阴影 ， 如 图 15.28 所 示 。 
.bsl{ box-shadow: 0 0 0 Spx #333: } 


第 2 步 ， 阴 影 就 是 对 原 对 象 的 复制 ,包括 内 边 距 和 边框 都 属于 box 的 占 位 范围 ， 阴 影 也 包括 对 内 边 距 | 


阴影 不 像 border 要 占据 布局 的 空间 ， 因 此 要 实现 对 象 鼠标 经 过 产生 外 围 的 边框 ， 可 以 使 用 阴影 的 扩展 


来 代替 border。 或 者 使 用 border 的 transparent 实现 ， 不 过 不 如 box-shadow 的 spread 扩展 方便 。 如 果 使 用 | 


border， 布 局 会 产生 影响 
第 5 步 ， 扩 展 为 负 值 的 阴影 ， 如 图 15.29 所 示 。 


-| 包 hepyooh- sc|| ble OB hepi/ocalto.. - Eo | | 


图 15.28 定义 扩展 阴影 图 15.29 定义 负 值 阴影 
bsl{ 
box-shadow: 0 15px 10px -15px #333: 
border: none: 
} 


< 所 注意 : 要 产生 这 样 的 效果 ，YY 轴 的 值 和 spread 的 值 刚好 是 一 样 ， 且 相反 的 。 其 他 边 设计 同 理 。 
第 6 步 ， 定 义 内 阴影 ， 如 图 15.30 所 示 。 
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background-color: #1C8426: 


T 
| 

| 

| 

| -bsl{ 
| 

| box-shadow: Opx Opx 20px #ffF inset: 
| 

| 


4 注意 : 可 以 直接 为 div 这 样 的 盒子 设置 box-shadow 爹 阴 影 ， 但 是 不 能 直接 为 img 图 片 设置 金 阴 影 。 
| 人 # 直接 在 图 片上 添加 内 阴影 无效 */ 
.img-shadow img { 
box-shadow: inset 0 0 20px red; 
} 


| 可 以 通过 为 img 的 容器 div 设置 内 阴影 ， 然 后 让 img 的 z-index 为 -1， 解 决 这 个 问题 。 但 是 这 种 做 法 不 可 
| 以 为 容器 设置 背景 颜色 ， 因 为 容器 的 级 别 比 图 片 高 ， 设 置 了 背景 颜色 会 挡住 图 片 ， 效 果 如 图 15.31 所 示 。 
谨 在 图 片 容器 上 添加 内 阴影 ， 生 效 */ 
.box-shadow { 
box-shadow: inset 0 0 20px red; 
display: inline-block; 


} 

.box-shadow img { 
position: relative: 
Z-index: -1; 


< 二 [EECTERTOOICETI FT 


€ 


图 15.30 定义 内 阴影 图 15.31 为 图 片 定义 内 阴影 


| 第 7 步 , 还 有 一 个 更 好 的 方法 ， 不 用 考虑 图 片 的 层级 ， 利 用 : before 伪 元 素 可 以 实现 ， 而 且 还 可 以 为 父 
| 容器 添加 背景 颜色 等 。 

| 雍 给 图 片 容器 上 添加 伪 元 素 或 伪 类 ， 不 用 为 img 设置 负 值 的 z-index 值 了 。 有 内 阴影 */ 
| img { 

| Pposition: relative: 

| background-color: #E C3: 

| padding: Spx: 

| 
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img: before { 
content: ": 
position: absolute; | 
top: 0; right: 0; bottom: 0: left: 0; | 
box-shadow: inset 0 0 40px #f00: | 


第 8 步 ， 定 义 多 个 阴影 ， 如 图 15.32 所 示 。 
.bsl { 


| 
box-shadow: 40px 40px rgba(26, 202, 221. 0.5), | 
80px 80px rgba(236, 43, 120. .5); | 
border-radius: 0; | 
| 
| 
| 


€ © CT sc enod | 


图 15.32 定义 多 个 阴影 


这 提示 : 阴影 也 是 有 层 有 关系 的 ， 前 面 的 阴影 层级 高 ， 会 压 住 后 面 的 阴影 。 阴 影 和 阴影 之 间 的 透明 度 可 
见 ， 而 主体 对 象 的 透明 度 对 阴影 不 起 作用 。 


15.4.3 ”案例 : 设计 撼 边 阴影 
本 节 示例 使 用 box-shadow 属性 设计 荫 边 阴影 起 边 效 果 就 是 四 角 劳 边 考 起 阴影 ， 如 图 15.33 所 示 。 


| 
| 

| 

| 

| 

| 

| 

| 

Ba © -®ve ocahost oe0/my nonest ml x | 
| 

| 

| 

| 

| 

| 


图 15.33 ”设计 者 边 阴 影 效 果 


“A427% 


2 


示例 主要 代码 如 下 。 

<style type="text/css"> 

* { margin: 0; padding: 0: } 广 清 除 页 边 距 */ 

ul { list-style: none: } 上 # 清除 项 目 列表 符号 */ 


-box {le* 设计 盒子 样式 */ 
width: 980px: height: auto: 
clear: both; 


让 固定 大 小 ， 高 度 自动 调整 */ 


| overflow: hidden: 请 禁止 超出 显示 */ 

| Imargin: 20px auto; 证 居中 显示 */ 

| 

外 

| .box li {/* 设 计 每 个 图 片 外 框 样式 */ 

| background: #fEF 让 白色 背景 *#/ 

| float: left: 片 浮动 并 列 显 示 */ 

| position: relative: 让 定义 定位 包含 框 */ 

| margin: 20px 10px: 证 调整 项 目 间 距 */ 
border: 2px solid #efefef: 让 增加 浅 色 边框 */ 
启 添 加 内 阴影 */ 


box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27). 0 0 4px rgba(0. 0. 0. 0.1) inset: 


} 


-box li img {/* 固定 图 片 大 小 ， 增 加 外 边 距 */ 
width: 290px: height: 200px; 


margin: Spx; 
1 


.box li: before {/* 在 左 侧 添 加 手 起 阴影 */ 


content: ": 语 空 内 容 */ 

position: absolute; 启 固定 定位 *#/ 

width: 90%: height: 80%:; 启 定 义 大 小 */ 
bottom: 13px; left: 21px: 启 定 位 */ 
background: transparent: 上 # 透 明 背 景 */ 
Z-index: -2: 上 # 显示 在 照片 下 面 专 
box-shadow: 0 8px 20px rgba(0. 0. 0. 0.8): 上 添加 阴影 */ 


| 
| 
| 
| 
| 
| transform: skew(-12deg) rotate(-6deg): 广 变形 并 旋转 阴影 ， 让 其 功 起 */ 
J 
| 
| .box li: after {/* 在 右 侧 添 加 考 起 阴影 ， 方 法 同上 */ 
| content: "": 
| 了 position: absolute: 
| width: 90%: height: 8096: 
| bottom: 13px: right: 21px: 
| z-index: -2: 
| background: transparent: box-shadow: 0 8px 20px rgba(0. 0. 0. 0.8): 
| transform: skew(12deg) rotate(6deg): 
| 
| </style> 
<ul class="box"> 
| <li><img src="images/] .jpe" /></li> 
| <li><img src="images/2.jpe" /></l> 
| <li><img src="images/3.jpg" /></l> 
| </ul> 
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本 例 主 要 使 用 CSS3 的 伪 类 : before 和 : after， 分 别 在 被 插 盒子 里 面 的 内 容 的 前 面 和 内 容 后 面 动 态 插 人 
空 内 容 。 设 置 盒子 时 ， 每 个 大 盒子 小 盒子 的 值 ， 大 小 都 要 算 清 楚 ， 不 要 超过 大 盒子 范围 ， 而 且 也 不 要 浪费 。 
使 用 z-index 属性 设置 元 素 的 堆 硬 顺序 。 拥 有 更 高 堆 和 琶 顺 序 的 元 素 总 是 会 处 于 堆 笃 顺序 较 低 的 元 素 的 前 面 ， 
它 仅 能 在 定位 元 素 上 素 

skew0 函数 能 够 让 元 素 倾斜 显示 ， 它 可 以 将 一 个 对 象 以 其 中 心 位 置 瑟 绕 着 义 轴 和 YY 轴 按照 一 定 的 角度 gp No 
倾斜 。rotate0 函数 只 是 旋转 ， 而 不 会 改变 元 素 的 形状 。skew0 函数 不 会 旋转 ， 而 只 会 改变 元 素 的 形状 。 相 Note 
关 知 识 将 在 后 面 章节 介绍 。 


1$.$ 案例 实 战 入 二 证 


本 节 将 通过 两 个 案例 练习 CSS 盒 模型 相关 组 成 要 素 的 具体 应 用 


15.5.1 设计 内 容 页 es 
线 上 阅读 

本 节 示 例 将 应 用 box-shadow 、text-shadow 和 border-radius 等 属性 ， 定 义 一 个 包含 阴影 、 圆 角 特 效 ， 同 

时 利用 CSS 渐变 、 半 透明 特效 设计 精致 的 栏目 效果 ， 预 览 效果 如 图 15.34 所 示 。 具 体操 作 步 又 请 扫 码 入 


图 15.34 设计 正文 内 容 页 


15.5.2 ”设计 应 用 界面 


本 节 示 例 利 用 CSS3 新 增 的 边框 和 背景 样式 来 模拟 桌面 界面 效果 。 主 要 应 用 了 box-shadow、border- 
radius 、text-shadow 、border-color 、border-image 等 属性 ， 同 时 还 用 到 了 渐变 设计 属性 。 整 个 案例 的 演示 效果 
如 图 15.35 所 示 。 具 体操 作 步 又 请 扫 码 学 习 | 


线 上 阅读 
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€ 3 © |B localhost/mysite/iesthtml 


图 15.35 设计 Windows 7 界面 效果 


15.6 在线 练习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTML5 设计 盒子 样式 。 感 兴趣 的 读者 可 以 扫 码 


图 回 
在 线 练 习 在 线 练 习 
CSS3 盒 模型 CSS3 布局 和 版 式 
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CSS3 动画 


( 馈 u 视频 讲解 : 1 小 时 1 分 钟 ) 


CSS3 动画 包括 过 渡 动 画 和 关键 帧 动画 ， 它 们 主要 通过 改变 CSS 属性 值 来 模拟 实现 。 
本 章 将 详细 介绍 Transform、Transitions 和 Animations 三 大 功能 模块 ， 其 中 Transform 实 
现 对 网 页 对 象 的 变形 操作 ，Tiransitions 实现 CSS 属性 过 渡 变 化 ，Animations 实现 CSS 样 
式 分 布 式 演 示 效 果 。 


【学 习 重 点 】 


dl 
dl 
ed 
ed 


设计 对 象 变形 操作 。 

设计 过 滚 样式 。 

设计 关键 帧 动画 。 

能 金 灵 活 使 用 CSS3 动画 设计 页 面 将 效 。 


eic 各 和 zk 开 直 信 入门 到 精通 ( 蕉 课 靖 靖 服 ) 


16.1 CSS3 变形 


| 
CSS3 变形 是 多 种 效果 的 集合 ， 如 旋转 、 缩 放 、 平 移 和 倾斜 等 ， 每 个 效果 都 被 称 作 变形 函数 ， 它 们 
| 可 以 操控 元 素 发 生 旋转 、 缩 放 、 平 移 和 倾斜 等 变化 。 在 CSS3 之 前 ， 实 现 类 似 的 效果 需要 图 片 、Flash 或 
| JavaScript 才能 完成 。 而 使 用 纯 CSS 来 完成 这 些 变形 则 无 须 加 载 这 些 额 外 的 文件 ， 提 升 了 开发 效率 ， 提 高 了 
| 页 面 的 执行 效率 。 

CSS3 变形 包括 3D 变形 和 2D 变形 ，3D 变形 使 用 基于 2D 变形 的 相同 属性 ， 如 果 了 解 了 2D 变形 ,会 
| 发 现 3D 变形 与 2D 变形 的 功能 类 似 。 

CSS 2D Transform 获得 了 各 主流 浏览 器 的 支持 ， 但 是 CSS 3D Transform 支持 程度 不 是 很 完善 。 考 虑 到 
浏览 器 兼容 性 ，3D 变形 在 实际 应 用 时 应 添加 私有 属性 ， 并 且 个 别 属 性 在 某 些 主流 浏览 器 中 并 未 得 到 很 好 的 
支持 ， 简 单 说 明 如 下 。 

在 正 10+ 中，3D 变形 部 分 属性 未 得 到 很 好 的 支持 。 

Firefox 10.0~Firefox 15.0 版 本 的 浏览 器 ， 在 使 用 3D 变形 时 需要 添加 私有 属性 -moz-， 但 从 Firefox 
16.0+ 版 本 开始 无 须 添 加 浏览 器 私有 属性 。 

在 Chrome 12.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

在 Safari 4.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

Opera 15.0+ 版 本 才 开 始 支持 3D 变形 ， 使 用 时 需要 添加 私有 属性 -webkit-。 

在 移动 设备 中 , iOS Safari 3.2+、Android Browser 3.0+、Blackberry Browser 7.0+ 、Opera Mobile 24.0+、 
Chrome for Android 25.0+ 都 支持 3D 变形 ， 但 在 使 用 时 需要 添加 私有 属性 -webkit-; Firefox for 
Android 19.0+ 支持 3D 变形 ， 但 无 须 添加 浏览 器 私有 属性 。 


网 回 


办 轨 办 凶 


16.1.2 设置 原点 


CSS 变形 的 原点 默认 为 对 象 的 中 心 点 ( 50% 50% )， 使 用 transform-origin 属性 可 以 重新 设置 新 的 变形 原 
i。 语 法 格式 如 下 。 


transform-origin: [ <percentage> | <length> | left | center (D | right ] [ <percentage> | <length> | top | center ® | bottom ]? 


取 值 简单 说 明 如 下 。 

<percentage>: 用 百分比 指定 坐标 值 ， 可 以 为 负 值 。 
<length>: 用 长 度 值 指定 坐标 值 ， 可 以 为 负 值 。 
left: 指定 原点 的 横 坐 标 为 left。 

center 中: 指定 原点 的 横 坐 标 为 center。 

right: 指定 原点 的 横 坐 标 为 right。 


办 办 办 国民 
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加 top: 指定 原点 的 纵 坐 标 为 top。 
回 “center @): 指定 原点 的 纵 坐 标 为 center。 
回 bottom: 指定 原点 的 纵 坐标 为 bottom。 
【示例 】 通 过 重 置 变形 原点 ， 可 以 设计 不 同 的 变形 效果 。 在 下 面 的 示例 中 以 图 像 的 右上 角 为 原点 这 时 针 | 
旋转 图 像 43" ， 比 较 效果 如 图 16.1 所 示 。 
<style type= "text/css"> | 
img {/* 固定 两 幅 图 像 的 相同 大 小 和 相同 显示 位 置 */ | 
position: absolute; | 
left: 20px; | 
top: 10px: | 
| 
| 


width: 170px: 
width: 250px: 


img.bg {/* 设置 将 第 1 幅 图 像 作为 参考 */ 
‘opacity: 0.3; | 
border: dashed 1px red: | 

} | 
img.change {/* 变形 第 2 幅 图 像 */ | 
border: solid 1px red: | 
transform-origin: top right: 语 以 右上 角 为 原点 进行 变形 */ | 
| 

| 

| 


transform: rotate(-45deg): 启 北 时 针 旋 转 御 度 */ 
} 
</style> 


<img class="bg" src="images/1.jpe"> 
<img class="change" src="images/1.jpg"> 


图 16.1 自 定义 旋转 原点 


16.1.3 2D 旋转 


rotate(0 函数 能 够 在 2D 空间 内 旋转 对 象 ， 语 法 格式 如 下 。 


Totate(<angle>) ! 
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参数 angle 表示 角度 值 ， 取 值 单位 可 以 deg ( 度 )， 如 90deg ( 90。， 一 圈 为 360。); 可 以 是 grad ( 梯 


如 100grad ( 相当 于 90。，360。 等 于 400grad ); 可 以 是 rad ( 弧度 )， 如 1.57rad ( 约 等 于 90°， 


T ); 可 以 是 tum ( 圈 )， 如 0.25tum (等 于 90?，360? 等 于 ltum )。 
【示例 】 以 上 节 示 例 为 基础 ， 下 面 按 默 认 原点 逆 时 针 旋 转 图 像 45°*， 效果 如 图 16.2 所 示 。 
img.change { 

border: solid 1px red: 

transform: rotate(-45deg): 


图 16.2 定义 旋转 效果 


16.1.4 2D 缩放 
| 


scale0 函数 能 够 缩放 对 象 大 小 ， 语 法 格式 如 下 


scale(<number>[, <number>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 宽 和 高 的 缩放 比例 ， 取 值 简单 说 明 如 下 。 
回 ”如果 取 值 为 正 数 ， 则 基于 指定 的 宽度 和 高 度 将 放大 或 缩小 对 象 。 
回 如果 取 值 为 负数 ， 则 不 会 缩小 元 素 ， 而 是 翻转 元 素 ( 如 文字 被 翻转 )， 然 后 再 缩放 元 素 。 
回 如果 取 值 为 小 于 1 的 小 数 ( 如 0.5 )， 则 可 以 缩小 元 素 。 
回 如果 第 二 个 参数 省 略 ， 则 第 二 个 参数 等 于 第 一 个 参数 值 。 
【示例 】 继 续 以 上 节 示 例 为 基础 ， 下 面 按 默认 原点 把 图 像 缩 小 一 半 ， 效 果 如 图 16.3 所 示 。 
img.change { 
border solid 1px red: 
transform: scale(0.5): 
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图 16.3 ”缩小 对 象 一 半 的 效果 


16.1.5 2D 平移 


translate(<translation-value>[, <translation-value>]) 


| 
translate() 两 数 能 够 平移 对 象 的 位 置 ， 语 法 格式 如 下 。 | 
| 
| 
| 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 和 轴 和 立轴 相对 于 原点 的 偏 移 距离 。 如 果 省 略 参 数 , 则 | 
默认 值 为 0。 如 果 取 负 值 ， 则 表示 反 向 偏 移 ， 参 考 原 点 保持 不 变 | 
【示例 】 下 面 的 示例 设计 了 向 右 下 角 方向 平移 图 像 ， 其 中 义 轴 偏 移 150 像素 , 立轴 偏 移 50 像素 ,演示 | 
效果 如 图 16.4 所 示 。 | 
img.change { 
border: solid 1px red: 
transform: translate(150px, 50px); 


} 


图 16.4 平移 对 象 效果 
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16.1.6 2D 倾斜 


| 
人 | skew0 函数 能 够 倾斜 显示 对 象 ， 语 法 格式 如 下 。 
| skew(<angle> [, <angle>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 义 轴 和 YY 轴 倾 斜 的 角度 。 如 果 省 略 参数 ， 则 默认 值 为 0。 
| 与 rotate() 函数 不 同 ，rotate0 函数 只 是 旋转 对 象 的 角度 ， 而 不 会 改变 对 象 的 形状 ; skew0 函数 会 改变 对 象 的 
形状。 
【示例 】 下 面 的 示例 使 用 skew0 函数 变形 图 像 ，X 轴 倾 斜 30" ,立轴 倾斜 20” ， 效 果 如 图 16.5 所 示 。 
| img.change { 

| border: solid 1px red: 

| transform: skew(30deg, 20deg): 


| 
| 
| 
| 图 16.5 ”倾斜 对 象 效果 
| 
| 
| 
| 
| 


16.1.7 2D 矩阵 


matrix() 是 一 个 矩阵 函数 ， 它 可 以 同时 实现 缩放 、 旋 转 、 平 移 和 倾斜 操作 ， 语 法 格式 如 下 。 


matrix(<number>. <number>. <number>. <number>. <number>. <number>) 


| 

| 

”该 函数 包含 6 个 值 ， 具 体 说 明 如 下 。 
| 第 1 个 参数 控制 义 轴 缩放 。 

| 第 2 个 参数 控制 X 轴 倾斜 。 

| 第 3 个 参数 控制 立轴 倾斜 。 

| 第 4 个 参数 控制 Y 轴 缩 放 。 

第 5 个 参数 控制 义 轴 平移 。 

第 6 个 参数 控制 Y 轴 平 移 。 
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【示例 】 下 面 的 示例 使 用 matrix0 函数 模拟 上 节 示 例 的 倾斜 变形 操作 ， 效 果 类 似 上 节 示 例 效果 。 


img.change { 
border: solid 1px red: 
transform: matrix(1. 0.6, 0.2. 1. 0. 0): 
上 
【补充 】 多 个 变形 函数 可 以 在 一 个 声明 中 同时 定义 。 例 如 : 
div{ 
transform: translate(80. 80): 
transform: rotate(45deg): 


transform: scale(1.5. 1.5): 
} 


针对 上 面 的 样式 ， 可 以 简化 为 : 
div { transform: translate(80, 80) rotate(45deg) scale(1.5, 1.5): } 


1.8 设置 变形 类 型 


transform-style: flat | preserve-3d 
取 值 简单 说 明 如 下 。 
回 flat: 指定 子 元 素 位 于 该 元 素 所 在 平面 内 进行 变形 ， 即 2D 平面 变形 ， 为 默认 值 。 


回 ”preserve-3d: 指定 子 元 素 定位 在 三 维 空间 内 进行 变形 ， 即 3D 立体 变形 。 


【示例 】 借 助 上 面 的 示例 ， 下 面 使 用 <div id="box"> 容器 包 玩 两 幅 图 像 ， 改 进 后 的 HTML 结构 代码 | 


如 下 。 


<div id="box"> 
<img class="bg" src="images/1.jpg"> 
<img class="change" src="images/1.jpg"> 
</div> 


为 <div id="box"> 容器 设置 CSS3 变形 类 型 为 3D， 样 式 代码 如 下 。 


#box { 
transform-style: preserve-3d: 
} 


为 change 类 图 像 应 用 3D 顺 时 针 旋 转 43" ，CSS 样式 代码 如 下 。 在 浏览 器 中 预览 ， 效 果 如 图 16.6 所 示 。 


img.change { 
border: solid 1px red: 
transform: rotatex(45deg) 


} 
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CSS3 变形 包括 2D 和 3D 两 种 类 型 ， 使 用 transform-style 属性 可 以 设置 CSS 变形 的 类 型 ， 语 法 格式 | 
如 下 。 | 


Forms Bw me 


发 从 入 门 到 精通 ( 微 课 精 编 版 ) 


@ localhosta080/mysite/testhtml 


图 16.6 3D 


| 16.1.9 ”设置 透视 距离 和 原点 


顺 时 针 旋 转 


| 3D 变形 与 2D 变形 最 大 的 不 同 就 在 于 其 参考 的 坐标 轴 不 同 : 2D 变形 的 坐标 轴 是 平面 的 ， 只 存在 XX 轴 和 
立轴， 而 3D 变形 的 坐标 轴 则 是 X、Y、Z 3 条 轴 组 成 的 立体 空间 ,XX 轴 正 向 、Y 轴 正 向 、Z 轴 正 向 分 别 朝 
向 右 、 下 和 屏幕 外 ,示意 如 图 16.7 所 示 。 


图 16.7 3D 委 


透视 是 3D 变形 中 最 重要 的 概念 。 如 果 不 设置 透视 ， 


标 轴 示 意图 
元 素 的 3D 变形 效果 将 无 法 实现 。 在 上 节 示 例 中 , 使 


困 数 rotatex ( 45deg ) 将 图 像 以 X 轴 方向 为 轴 沿 顺 时 


【示例 1】 在 上 节 示 例 的 基础 上 ， 在 <div id="box" 


I 下。 


body{ 
perspective: 1200px: 
} 


针 旋转 43" ， 由 于 没有 设置 透视 样式 的 效果 ， 可 以 看 


浏览 器 将 图 像 的 3D 变形 操作 垂直 投射 到 2D 视图 平面 上 ， 最 终 呈 现 出 来 的 只 是 图 像 的 宽 高 变化 。 


> 容器 外 设置 透视 点 距离 为 1200 像素 ， 则 样式 代码 
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在 浏览 器 中 可 以 看 到 如 图 16.8 所 示 的 变形 效果 。 


四 localhosca060/mysiter 天 
€ 7 © |@ localhosta080/mysite/testl.html 


Y 轴 


现 察 者 可 移动 区 域 ( 江 ) 
Z 轴 
图 16.8 沿 X 轴 3D 旋转 45” 效果 图 图 16.9 变形 元 素 、 观 察 者 和 被 观察 元 素 位 置 关系 示意 图 


基于 对 上 面 示例 的 直观 体验 ， 下 面 来 了 解 几 个 核心 概念 : 变形 元 素 、 观 察 者 和 被 透视 元 素 ， 关系 如 
图 16.9 所 示 。 | 
回 ”变形 元 素 : 就 是 需要 进行 3D 变形 的 元 素 。 主 要 设置 transform、transform-origin、backface-visibility | 
等 属性 。 | 
回 观察 者 : 就 是 浏览 器 模拟 出 来 的 用 来 观察 被 透视 元 素 的 一 个 没有 尺寸 的 点 ， 观 察 者 发 出 视线 ， 类 似 | 
回 ”被 观察 元 素 : 也 称 被 透视 元 素 ， 就 是 被 观察 者 观察 的 元 素 ， 根 据 属 性 设置 的 不 同 ， 它 有 可 能 是 变形 | 
对 象 本 身 ， 也 可 能 是 它 的 父 级 或 祖先 元 素 ， 主 要 设置 perspective 、perspective-origin 等 属性 。 
1. 透视 距离 
透视 距离 是 指 观察 者 沿 着 平行 于 Z 轴 的 视线 与 屏幕 之 间 的 距离 ， 也 称 为 视 距 ， 示 意 如 图 16.10 所 示 。 


和 X 轴 


Y 轴 


外 观察 者 


图 16.10 透视 距离 示意 图 
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使 用 perspective 属性 可 以 定义 透视 距离 ， 语 法 格式 如 下 。 
perspective: none | <length> 


取 值 简单 说 明 如 下 。 
| none: 不 指定 透视 。 
| <length>: 指定 观察 者 距离 平面 的 距离 ， 为 元 素 及 其 内 容 应 用 透视 变换 。 


| < 全 注意 : 透视 距离 不 可 为 0 和 负数 ， 因 为 观察 者 与 屏幕 距离 为 0 时 或 者 在 屏幕 背面 时 是 不 可 以 观察 到 被 
| 透视 元 素 的 正面 的 。perspective 也 不 可 取 百 分 比 ， 因 为 百分比 需要 相对 的 元 素 , 但 Z 轴 并 没有 
可 相对 的 元 素 尺寸 。 


一 般 地 ， 物 体 离 得 越 远 ， 显 得 越 小 。 反 映 在 perspective 属性 上 ， 该 属性 值 越 大 ， 元 素 的 3D 变形 效果 越 
| 不 明显 。 

| 设置 perspective 属性 的 元 素 就 是 被 透视 的 元 素 。 一 般 地 ， 该 属性 只 能 设置 在 变形 元 素 的 父 级 或 祖先 级 。 
| 因为 浏览 器 会 为 其 子 级 的 变形 产生 透视 效果 ， 但 并 不 会 为 其 自身 产生 透视 效果 。 应 用 示例 可 以 参考 上 面 的 
| 示例 1。 

| 2. 透视 原点 

| 透视 原点 是 指 观察 者 的 位 置 ， 一 般 观 察 者 位 于 与 屏幕 平行 的 另 一 个 平面 上 ， 观 察 者 始终 是 与 屏幕 垂直 
| 的 。 观 察 者 的 活动 区 域 是 被 观察 元 素 的 盒 模型 区 域 ， 示 意 如 图 16.11 所 示 。 


2Z 轴 


观察 者 可 移动 区 域 ( 黄 ) 
图 16.11 下 面 黄 色 区 域 为 透视 原点 的 位 置 区 域 
使 用 perspective-origin 属性 可 以 定义 透视 点 的 位 置 ， 语 法 格式 如 下 。 
Derspective-origin: [ <percentage> | <length> | left | center D | right ] [ <percentage> | <length> | top | center ® | bottom ]? 


取 值 简单 说 明 如 下 。 
<percentage>: 用 百分比 指定 透视 点 坐标 值 ， 相 对 于 元 素 宽度 ， 可 以 为 负 值 。 
回 <length>: 用 长 度 值 指定 透视 点 坐标 值 ， 可 以 为 负 值 。 
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left: 指定 透视 点 的 横 坐 标 为 left。 

center 中: 指定 透视 点 的 横 坐 标 为 center。 

Tight: 指定 透视 点 的 横 坐 标 为 right。 

top: 指定 透视 点 的 纵 坐 标 为 top。 

center @): 指定 透视 点 的 纵 坐 标 为 center。 

bottom: 指定 透视 点 的 纵 坐 标 为 bottom。 

【示例 2】 在 示例 1 的 基础 上 ， 设 置 观察 点 在 右 侧 居中 的 位 置 ， 显 示 效 果 如 图 16.12 所 示 。 
body{ 

perspective: 1200px; 

Pperspective-origin: right; 


加 图 图 图 罗 加 


} 


图 16.12 设置 观察 点 位 置 在 右 侧 效果 


16.1.10 ”3D 平移 


3D 平移 主要 包括 下 面 4 个 函数 。 

回 translatex ( <translation-value> ): 指定 对 象 X 轴 (水 平方 向 ) 的 平移 。 

回 translatey ( <translation-value> ): 指定 对 象 Y 轴 ( 垂直 方向 ) 的 平移 。 

回 translatez ( <length> ): 指定 对 象 Z 轴 的 平移 。 

回 translate3d ( <translation-value>，<translation-value>，<length> ): 指定 对 象 的 3D 平移 。 第 1 个 参数 | 
对 应 X 轴 ,第 2 个 参数 对 应 立轴 ， 第 3 个 参数 对 应 Z 轴 ， 参数 不 允许 省 略 。 

参数 <translation-value> 表示 <length> 或 <percentage>， 即 X 轴 和 立轴 可 以 取 长 度 值 或 百分比 ， 但 是 Z| 

轴 只 能 够 设置 长 度 值 。 

【示例 】 下 面 的 示例 设计 是 为 图 像 在 3D 空间 中 平移 设计 了 一 种 错位 效果 ， 如 图 16.13 所 示 。 

#box { 
transform-style: preserve-3d: 
Pperspective: 1200px: 
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es yo pe me ( 微 课 精 编 版 ) 


1 
img.change { 

border: solid 1px red: 

transform: translate3d(200px, 30px, 60px); 
} 


图 16.13 定义 3D 平移 效果 


从 图 16.13 效果 可 以 看 出 ， 当 ZzZ 轴 值 越 大 时 ， 元 素 离 浏 览 者 越 近 ， 在 视觉 上 元 素 就 变 得 越 大 ; 反之 其 值 
越 小 时 ， 元 素 也 离 观 看 者 越 远 ， 在 视觉 上 元 素 就 变 得 越 小 。 
次 提示 : translatez0 函数 在 实际 使 用 中 等 效 于 translate3d ( 0, 0, tz )。 仅 从 视觉 效果 上 看 ，translatez0 和 
translate3d ( 0, 0, tz ) 函数 的 功能 非常 类 似 于 二 维 空间 的 scale( 缩放 函数 ， 但 实际 上 完全 不 同 。 
translatez() 和 translate3d ( 0，0, 纪 ) 变形 是 发 生 在 乙 轴 上 ， 而 不 是 在 X 轴 和 立轴 上 。 


16.1.11 3D 缩放 


3D 缩放 主要 包括 下 面 4 个 函数 。 

回 scalex ( <number> ): 指定 对 象 入 轴 的 (水 平方 向 ) 缩放 。 

scaley ( <number> ): 指定 对 象 Y 轴 的 (垂直 方向 ) 缩放 。 

回 scalez ( <number> ): 指定 对 象 的 Z 轴 缩 放 。 

回 scale3d ( <number>，<number>，<number> ): 指定 对 象 的 3D 缩放 。 第 1 个 参数 对 应 叉 轴 , 第 2 个 


参数 对 应 立轴 ,第 3 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 。 
参数 <number> 为 一 个 数字 ， 表 示 缩 放 倍数 ， 可 参考 2D 缩放 参数 说 明 。 
【示例 】 下 面 以 上 面 的 示例 为 基础 ,在 X 轴 和 立轴 放大 图 像 1.5 倍 , Z 轴 放大 图 像 2 倍 ， 然 后 使 
translatex() 把 变形 的 图 像 移 到 右 侧 显示 ， 以 便 与 原 图 进行 比较 ， 演 示 效 果 如 图 16.14 所 示 。 
img.change { 
border: solid 1px red: 
transform: scale3D(1.5, 1.5. 2) translatex(240px): 


} 
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图 16.14 定义 3D 缩放 效果 


16.1.12 3D 旋转 


3D 旋转 主要 包括 下 面 4 个 函数 

回 rotatex (<angle> ): 指定 对 象 在 和 XX 轴 上 的 旋转 角度 。 
回 rotatey ( <angle> ): 指定 对 象 在 立轴 上 的 旋转 角度 。 
回 rotatez ( <angle> ): 指定 对 象 在 Z 轴 上 的 旋转 角度 。 
回 


rotate3d ( <number>，<number>，<number>，<angle> ): 指 


数 分 别 表示 旋转 的 方向 X、Y、Z， 第 4 个 参数 表示 旋转 的 角度 ， 


定 对 象 的 3D 旋转 角度 ， 其 中 前 3 个 参 
参数 不 允许 省 略 。 


党 提示 :rotate3d0 函数 前 3 个 参数 值 分 别 用 来 描述 围绕 义 、Y、Z 轴 旋 转 的 矢量 值 。 最 终 变形 元 素 沿 着 由 | 
(0, 0, 0) 和 (xX, y,zZ) 这 两 个 点 构成 的 直线 为 轴 进 行 旋转 。 当 第 4 个 参数 为 正 数 时 ， 元 素 进 | 
行 顺 时 针 旋 转 ; 当 第 4 个 参数 为 负数 时 ,元 素 进行 逆 时 针 旋 转 。 


rotate3d0 函数 可 以 与 前 面 3 个 旋转 函数 进行 转换 ， 简 单 说 明 如 下 


回 rotatex (a ) 函数 功能 等 同 于 rotate3d ( 1, 0, 0, a)。 
回 rotatey (a ) 函数 功能 等 同 于 rotate3d (0, 1, 0, a)。 
回 rotatez (a ) 函数 功能 等 同 于 rotate3d (0, 0, 1, a)。 
【示例 】 以 上 面 的 示例 为 基础 ， 使 用 rotate3d0 函数 顺 时 针 旋 转 
为 2:2:1, 效果 如 图 16.15 所 示 。 
img.change { 
border: solid 1px red: 
transform: rotate3d(2. 2. 1. 45deg): 
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图 像 45" ， 


其 中 XX 轴 、 Y 负 和 z 轴 比值 


区 Heic 和 xp 开发 从 和 站 到 精 和 ( 微 课 精 编 版 ) 


© localhostB08o/mysiteytesthtml 请 | = 


图 16.15 定义 3D 旋转 效果 


16.1.13 透视 函数 


perspective 属性 可 以 定义 透视 距离 ， 它 应 用 在 变形 元 素 的 父 级 或 祖先 级 元 素 上 。 而 透视 函数 perspective0 


| 是 transform 属性 的 一 个 属性 值 ， 可 以 应 用 于 变形 元 素 本 身 。 具 体 语法 格式 如 下 。 


perspective(<length>) 


参数 是 一 个 长 度 值 ， 该 值 只 能 是 正 数 
【示例 】 下 面 的 示例 设计 了 图 像 在 X 轴 上 旋转 120? ， 透 视 距离 为 180 像素 ， 如 图 16.16 所 示 。 
#box { transform-style: preserve-3d: } 
img.change { 
border: solid 1px red: 
transform: perspective(180px) rotatex(120deg): 


[localhorsa0e0/mysite, x 性 


© localhost8080/mysite/testhtml | : 


图 16.16 定义 透视 效果 


“444。 


第 10 章 CSS3 动画 a 


< 全 注意 : 由 于 transform 属性 是 按 从 前 向 后 的 顺序 解析 属性 值 的 ， 所 以 一 定 要 把 perspective() 函数 写 在 其 | 
他 变形 函数 前 面 ， 和 否则 将 没有 透视 效果 。 | 
由 于 透视 原点 perspective-origin 只 能 设置 在 设置 了 perspective 透视 属性 的 元 素 上 。 若 将 元 素 设 | 
置 透视 函数 perspective()， 则 透视 原点 不 起 作用 ， 观 察 者 使 用 默认 位 置 ， 即 元 素 中 心 点 对 应 的 平 ， 
面 上 。 


16.1.14 ”变形 原点 


2D 变形 原点 由 于 没有 Z 轴 ， 所 以 Z 轴 的 值 默认 为 0。 在 3D 变形 原点 中 ,，Z 轴 是 一 个 可 以 设置 的 变量 。 


语法 格式 如 下 。 | 
transform-origin: XX 轴 Y 轴 Z 轴 | 
取 值 简单 说 明 如 下 。 


回 和 X 轴 : left | center |right | <length> | <percentage>。 

回 立轴 : top | center |bottom | <length> | <percentage>。 

回 Z 轴 : <length>。 | 

对 于 X 轴 和 立轴 来 说 ， 可 以 设置 关键 字 和 百分比 ， 分 别 相对 于 其 本 身 元 素 水 平方 向 的 宽度 和 垂直 方向 | 
的 高 度 和 ; Z 只 能 设置 长 度 值 。 


16.1.15 ”背景 可 见 


元 素 的 背面 在 默认 情况 下 是 可 见 的 ， 有 时 可 能 需要 让 元 素 背面 不 可 见 ， 这 时 候 就 可 以 使 用 backface- | 
visibility 属性 ， 该 属性 的 具体 语法 格式 如 下 。 | 
backface-visibility: visible | hidden 


| 

| 

| 
取 值 简单 说 明 如 下 。 | 

回 visible: 指定 元 素 背面 可 见 ， 允 许 显示 正面 的 镜像 ， 为 默认 值 。 | 

回 hidden: 指定 元 素 背面 不 可 见 。 | 
【示例 】 在 16.1.13 透视 函数 一 节 示 例 中 ， 如 果 在 变形 图 像样 式 中 添加 backface-visibility: hidden; , 定 | 

义 元 素 背 面 面 向 用 户 时 不 可 见 ， 这 时 如 果 再 次 预览 ， 则 会 发 现 变形 图 像 已 经 不 存在 ， 因 为 它 的 背面 面向 | 
户 , 被 隐藏 了 ,效果 如 图 16.17 所 示 。 | 
| 

| 

| 

| 

| 

| 

| 


img.change { 
border: solid 1px red: 
transform: perspective(180px) rotatex(120deg): 
backface-visibility: hidden: 
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图 16.17 定义 背面 面向 用 户 不 可 见效 果 


16.2 过 渡 动 画 


权威 参考 


2013 年 2 月 ，W3C 发 布 了 CSS Transitions 工作 草案 ， 在 这 个 草案 中 描述 了 CSS 过 渡 动 画 的 基本 实现 
| 方法 和 属性 。 目 前 获得 了 所 有 浏览 器 的 支持 ， 包 括 支持 带 有 前 级 ( 私有 属性 ) 或 不 带 前 绥 的 过 渡 ( 标准 属 
| 性 )。 最 新 版 本 浏览 器 (IE 10+、Firefox 16+ 和 Opera 12.5+ ) 均 支持 不 带 前 级 的 过 渡 属 性 transition， 而 旧版 
| 浏览 器 则 支持 前 级 的 过 渡 ， 如 Webkit 引擎 支持 -webkit-transition 私有 属性 ，Mozilla Gecko 引擎 支持 -moz- 
transition 私有 属性 ，Presto 引擎 支持 -0-transition 私有 属性 ，IE6-IE9 浏览 器 不 支持 transition 属性 ，IE10 支 


| 持 transition 属性 。 


16.2.1 设置 过 渡 属性 


transition-property 属性 用 来 定义 过 渡 动画 的 CSS 属性 名 称 ， 基 本 语法 如 下 。 
transition-property: none | all |[ <IDENT> ] ['.' <IDENT> ]*: 


| 

外 

| 

| 取 值 简单 说 明 如 下 。 

| 回 none: 表示 没有 元 素 。 
| 回 all: 默认 值 ， 表 示 针 对 所 有 元 素 ， 包括: before 和 : after 伪 元 素 。 

| 回 IDENT: 指定 CSS 属性 列表 。 几 乎 所 有 色彩 、 大 小 或 位 置 等 相关 的 CSS 属性 ， 包 括 许多 新 添加 的 
| CSS3 属性 ， 都 可 以 应 用 过 渡 ， 如 CSS3 变换 中 的 放大 、 缩 小 、 旋 转 、 斜 切 、 渐 变 等 。 

【示例 】 在 下 面 的 示例 中 ， 指 定 过 渡 动 画 的 属性 为 背景 颜色 。 这 样 当 鼠标 经 过 盒子 时 ， 会 自动 从 红色 背 
| 景 过 渡 到 蓝 色 背景 ,演示 效果 如 图 16.18 所 示 。 
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(a ) 默认 状态 (b ) 鼠标 经 过 时 背景 色 切 换 
图 16.18 定义 简单 的 背景 色 切 换 动画 


<style type= "text/css"> 
div{ 
margin: 10px auto: height: 80px; 
background: red; 
border-radius: 12px: 
box-shadow: 2px 2px 2px #999; 
} 
div: hover { 
background-color: blue; 
让 指定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 


} 


</style> 


<div></div> 


16.2.2 ”设置 过 渡 时 间 


transition-duration 属性 用 来 定义 转换 动画 的 时 间 长 度 ， 基 本 语法 如 下 


transition-duration: <time> [. <time>]*: 


初始 值 为 0， 适 用 于 所 有 元 素 ， 以 及 : before 和 : after 伪 元 素 。 在 默认 情况 下 ， 
所 以 当 指 定 元 素 动画 时 ， 会 看 不 到 过 渡 的 过 程 ， 直 接 看 到 结果 
【示例 】 以 上 节 示 例 为 例 ， 下 面 设置 动画 过 渡 时 间 为 2 秒 ， 当 鼠标 移 过 对 象 时 ， 
渐 过 渡 到 蓝 色 ， 演 示 效 果 如 图 16.19 所 示 。 
div: hover { 
background-color: blue: 
上 族 指定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
入 指定 动画 过 渡 的 时 间 */ 


transition-duration: 2s: 
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动画 过 渡 时 间 为 0 秒 ，| 


会 看 到 背景 色 从 红色 逐 | 


16.2.3 ”设置 延迟 过 渡 时 间 


esz 各 则 ap 开发 从 入 门 到 村 通 ( 航 银 皇 纺 县) 


«> © [Gamowaromr | : 


图 16.19 设置 动画 时 间 


transition-delay 属性 用 来 定义 开启 过 渡 动 画 的 延迟 时 间 ， 基 本 语法 如 下 。 
transition-delay: <time> [, <time>]*; 


初始 值 为 0， 适 用 于 所 有 元 素 ， 以 及 : before 和 : after 伪 元 素 。 设 置 时 间 可 以 为 正 整数 、 负 整数 和 零 ， 


| 非 零 的 时 候 必须 设置 单位 是 s ( 秒 ) 或 者 ms ( 毫秒 )， 为 负数 的 时 候 ， 过 渡 的 动作 会 从 该 时 间 点 开始 显示 ， 


| 之 前 的 动作 被 截断 。 为 正 数 的 时 候 ， 过 滤 的 动作 会 延迟 触发 。 


【示例 】 继 续 以 上 节 示 例 为 基础 进行 介绍 ， 下 面 设置 过 渡 动 画 推迟 2 秒 后 执行 ， 则 当 鼠 标 移 过 对 象 时 ， 


| 会 看 不 到 任何 变化 ， 过 了 2 秒 之 后 ， 才 发 现 背 景色 从 红色 逐渐 过 滤 到 蓝 色 


div: hover { 
background-color: blue; 
让 指定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
族 指 定 动画 过 渡 的 时 间 */ 
transition-duration: 2s; 
让 指定 动画 延迟 触发 */ 
transition-delay: 2s; 


16.2.4 设置 过 渡 动画 类 型 


transition-timing-function 属性 用 来 定义 过 渡 动画 的 类 型 ， 基 本 语法 如 下 。 


transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubicbezier ( <number>, <number>, <number>, 
<number> )[. ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier ( <number>. <number>. <number>, <number> ) ]* 


属性 初始 值 为 ease， 取 值 简单 说 明 如 下 。 

ease: 平滑 过 渡 ， 等 同 于 cubic-bezier ( 0.25，0.1，0.25，1.0 ) 函数 ， 即 立方 贝 塞 尔 。 
linear: 线性 过 渡 ， 等 同 于 cubic-bezier ( 0.0，0.0，1.0，1.0 ) 函数 。 

ease-in: 由 慢 到 快 ， 等 同 于 cubic-bezier ( 0.42，0，1.0，1.0 ) 函数 。 

ease-out: 由 快 到 慢 ， 等 同 于 cubic-bezier (0，0，0.58，1.0 ) 函数 。 

ease-in-out: 由 慢 到 快 再 到 慢 ， 等 同 于 cubic-bezier ( 0.42，0，0.58，1.0 ) 函数 。 
cubic-bezier: 特殊 的 立方 贝 塞 尔 曲 线 效果 。 


回回 轿 力图 罗 
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【示例 】 继 续 以 上 节 示 例 为 基础 进行 介绍 ， 下 面 设置 过 渡 类 型 为 线性 效果 ， 代 码 如 下 。 
div: hover { 
background-color: blue: 
让 指定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
证 指定 动画 过 渡 的 时 间 */ 
transition-duration: 10s; 
族 指定 动画 过 渡 为 线性 效果 */ 
transition-timing-function: linear: 


16.2.5 ”设置 过 渡 触 发 动作 


CSS3 过 渡 动 画 一 般 通过 动态 伪 类 触发 ， 如 表 16.1 所 示 。 


表 16.1 CSS 动态 伪 类 


动态 伪 类 说 ”上 明 
: link 未 访问 的 链接 
: Visited 访问 过 的 链接 
: hover 鼠标 经 过 元 素 
: active 鼠标 单 击 元 素 
: focus 元 素 被 选中 


也 可 以 通过 JavaScript 事件 触发 ， 包 括 click 、focus 、mousemove 、mouseover 、mouseout 等 。 
1. : hover 
最 常用 的 过 渡 触 发 方式 是 使 用 : hover 伪 类 。 
【示例 1】 下面 的 示例 设计 了 当 鼠 标 经 过 div 元 素 时 ， 该 元 素 的 背景 颜色 会 在 经 过 1 秒 的 初始 延迟 后 ， 
于 2 秒 内 动态 地 从 绿色 变 为 蓝 色 。 
<style type="text/css"> 
div{ 
margin: 10px auto; 
height: 80px: 
border-radius: 12px: 
box-shadow: 2px 2px 2px #999:; 
background-color: red: 
transition: background-color 2s ease-in 1s: 
} 
div: hover { background-color: blue} 
</style> | 
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Dy 
从 


: active 伪 类 表示 用 户 单 击 某 个 元 素 并 按 住 鼠 标 按键 时 显示 的 状态 。 
【示例 2】 下 面 的 示例 设计 了 当 用 户 单 击 div 元 素 时 ， 该 元 素 被 激活 ， 这 时 会 触发 动画 ， 高 度 


T 
| 
| 
| 
| 2. : active 
外 
| 
| 
| 


| 


又 会 恢复 为 原来 的 高 度 ， 如 图 16.20 所 示 。 


| <style type="text/css"> 

| div{ 

| margin: 10px auto; 

| border-radius: 12px; 

| box-shadow: 2px 2px 2px #999: 
background-color: #8AF435; 

| height: 200px: 

| transition: width 2s ease-in: 


| ) 

| div: active {height: 400px; } 

| </style> 

| <div></div> 

| 

; ; 
5 EE EE ls 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| (a ) 默认 状态 (b ) 单 击 

| 图 1620 定义 激活 触发 动画 

| 3. : focus 

| : focus 伪 类 通常 会 在 表单 对 象 接收 键盘 响应 时 出 现 。 

| 【示例 3】 下 面 设计 当 输 入 框 获取 焦点 时 ， 输 入 框 的 背景 色 逐 步 高 亮 显示 ， 如 图 16.21 所 示 。 
| 

| <style type="text/css"> 

| label { 

| display: block: 

| margin: 6px 2px: 

| 

| } 
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属性 从 


| 200px 过 渡 到 400px。 如 果 按 住 该 元 素 ， 保 持 住 活动 状态 ， 则 div 元 素 始终 显示 400px 高 度 ， 松 开 鼠 标 之 后 ， 
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input[type="text"], input[type="password"] { 
padding: 4px: 
border: solid 1px #ddd: 
transition: background-color 1s ease-in: 


} 
input: focus { background-color: #9FFCS54: } 
</style> | 
<form id=fm-form action="" method=post> | 
<fieldset> | 
<legend> 用 户 登录 </legend> | 
<label for="name"> 姓名 | 
<input type="text" id="name" name="name" > | 
</label> | 
<label for="pass"> 密码 | 
<input type="password" id="pass" name="pass" > | 
</label> | 
</fieldset> 
</form> 


| 
| 
| 
[I 
| 
I 多 ecahos | 
用 户 登 录 | 
姓名 | 

| 

| 

| 


密码 | 


图 16.21 定义 获取 


触发 动画 
次 提示 : 将 hover 伪 类 与 : focus 配合 使 用 ， 能 够 丰富 鼠标 用 户 和 键盘 用 户 的 体验 。 


| 
| 
| 
| 
| 
| 
4. : checked | 
: checked 伪 类 在 被 选中 状况 时 触发 过 渡 。 | 
【示例 4】 下 面 的 示例 设计 了 当 复 选 框 被 选中 时 缓慢 缩 进 2 个 字符 ， 演 示 效 果 如 图 16.22 所 示 。 | 
<style type="text/css"> | 
label.name { | 
display: block: | 
margin: 6px 2px: | 
input[type="text"]. input[type="password"] { | 
padding: 4px; | 
border: solid 1px #ddd: | 

} | 
input[type="checkbox"] { transition: margin 1s ease: } | 
input[type="checkbox"]: checked { margin-left: 2em: } | 
</style> | 
<form id=fm-form action="" method=post> 


.451 。 


xc 和 au 开发 从 和 站 到 本道 ( 微 裸 精 编 版 ) 


<fieldset> 
<legend> 用 户 登 录 </legend> 
<label class="name" for="name"> 姓名 
<input type="text" id="name" name="name" > 
</label> 
<p> 技术 专长 <br> 
<label> 
<input type="checkbox" name="web" value="html" id="web_0"> 
HTML</label><br> 
<label> 
<input type="checkbox" name="web" value="css" id="web_1"> 
Css</label><br> 
<label> 
<input type="checkbox" name="web" value="javascript" id="web_2"> 
JavaScript</label><br> 
</p> 
</fieldset> 
</form> 


Se © B htpi/hocalho-. ~ BO | Blocalhost 


图 16.22 定义 被 选中 时 触发 动画 
5. 媒体 查询 


触发 元 素 状态 变化 的 另 一 种 方法 是 使 用 CSS3 媒体 查询 ， 关 于 媒体 查询 详解 请 参考 下 章 内 容 。 
【示例 5】 下 面 的 示例 设计 了 div 元 素 的 宽度 和 高 度 为 49% x 200px， 如 果 用 户 将 窗口 大 小 调整 到 420px 


或 以 下 ， 则 该 元 素 将 过 渡 为 100% x 100px。 也 就 是 说 ， 当 窗口 宽度 变化 经 过 420px 的 阅 值 时 ， 将 会 触发 过 
| 渡 动 画 ， 如 图 16.23 所 示 。 


<style type="text/css"> 

div{ 
float: left: margin: 2px: 
width: 49%; height: 200px: 
background: #93FB40: 
border-radius: 12px: 
box-shadow: 2px 2px 2px #999: 
transition: Width 1s ease, height 1s ease: 


1 
@media only screen and (max-width: 420px) { 
div{ 
width: 100%; 
height: 100px: 
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} 
</style> 
<div></div> 


i 
1 
| 
| 
} | 
| 
| 
| 
<div></div> | 


ESEEC [yr 


© Gar Fr 


上 


(a ) 当 窗 口 小 于 等 于 420px 宽度 (b ) 当 窗口 大 于 420px 宽度 | 
图 16.23 设备 类 型 触发 动画 | 


如 果 网 页 加 载 时 用 户 的 窗口 大 小 是 420px 或 以 下 ， 浏 览 器 会 在 该 部 分 应 用 这 些 样式 ， 但 是 由 于 不 会 出 | 
现状 态 变化 ， 因 此 不 会 发 生 过 渡 。 

6. JavaScript 事件 | 

【示例 6】 下 面 的 示例 可 以 使 用 纯粹 的 CSS 伪 类 触发 过 渡 ， 为 了 方便 用 户 理解 ， 这 里 通过 jQuery 脚本 | 
触发 过 渡 。 | 

<script type="text/javascript" src="images/jquery-1.10.2.js"></script> 

‘<script type="text/javascript"> 

S$(function() { 

$("#button").click(function() { 
$(".box").toggleClass("change"); 


»); 
‘</script> 
<style type="text/css"> 
.box { 

margin: 4px: 

background: #93FB40: 

border-radius: 12px: 

box-shadow: 2px 2px 2px #999: 

width: 50%: height: 100px: 

transition: width 2s ease. height 2s ease: 
} 
.Change { width: 100%; height: 120px: } 
</style> 
<input type="button" id="button" value=" 触发 过 渡 动 画 " /> 
<div class="box"></div> 
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eic 和 和 xuk 开 雪 信 入门 到 精通 ( 蕉 课 靖 靖 及) 


| 
| 
| 在 文档 中 包含 一 个 box 类 的 盒子 和 一 个 按钮 ， 当 单 击 按钮 时 ，jQuery 脚本 会 将 盒子 的 类 切换 为 change， 
| 
| 
| 
| 


从 而 触发 了 过 渡 动 画 ， 演 示 效 果 如 图 16.24 所 示 。 
SB 


Note 一 | 


(a ) 默认 状态 (b ) JavaScript 事件 激活 状态 
图 16.24 使 用 JavaScript 脚本 触发 动画 


上 面 演示 了 样式 变化 会 导致 发 生 过 渡 动 画 ， 也 可 以 通过 其 他 方法 触发 这 些 更 改 ， 包 括 通过 JavaScript 脚 
| 本 动态 更 改 。 从 执行 效率 来 看 ， 事 件 通 常 应 当 通 过 JavaScript 触发 ， 简 单 动画 或 过 渡 则 应 使 用 CSS 触发 。 


16.3 。 帧 动画 人 
国生 让 
权威 参考 
2012 年 4 月 ，W3C 发 布 了 CSS Animations 工作 草案 ， 在 这 个 草案 中 描述 了 CSS 关键 帧 动画 的 基本 实 
| 现 方法 和 属性 。 目 前 最 新 版 本 的 主流 浏览 器 都 支持 CSS 帧 动画 ， 如 了 10+、Firefox 和 Opera 均 支 持 不 带 
| 前 级 的 动画 属性 animation， 而 旧版 浏览 器 则 支持 前 组 的 动画 ， 如 Webkit 引擎 支持 -webkit-animation 属性 ， 
| Mozilla Gecko 引擎 支持 -moz-animation 私有 属性 ，Presto 引擎 支持 -o-animation 私有 属性 ，IE6~IE9 浏览 器 
不 支持 animation 属性 。 


16.3.1 ”设置 关键 帧 


| 

| 

| 

| 

csss 借用 @keyfames 定义 关键。 具体 用 法 如 下 。 
@keyframes animationname { 

| keyframes-selector { 

| css-styles: 

| } 

| 

| 
| 
| 


其 中 参数 说 明 如 下 。 
回 animationname: 定义 动画 的 名 称 。 
回 keyframes-selector: 定义 帧 的 时 间 未 知 ， 也 就 是 动画 时 长 的 百分比 ， 合 法 的 值 包括 0~100%、from 
(等 价 于 0% )、to (等 价 于 100% )。 
回 css-styles: 表示 一 个 或 多 个 合法 的 CSS 样式 属性 。 
在 动画 过 程 中 ， 用 户 能 够 多 次 改变 这 套 CSS 样式 。 以 百分比 来 定义 样式 改变 发 生 的 时 间 ， 或 者 通过 关 
| | 鲁 词 ftom 和 to。 为 了 获得 最 佳 浏览 器 的 支持 ， 设 计 关键 帧 动画 时 ， 应 该 始终 定义 0 和 100% 位 置 帧 。 最 后 ， 
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为 每 帧 定义 动态 样式 ， 同 时 将 动画 与 选择 器 绑 定 。 
【示例 】 下 面 的 示例 演示 了 如 何 让 一 个 小 方 盒 沿 着 方形 框 内 壁 匀速 运动 ， 效 果 如 图 16.25 所 示 。 


<style> 
#wrap {人 * 定义 运动 轨迹 包含 框 */ 
position: Telative: 店 定 义 定位 包含 框 ， 避 免 小 盒子 跑 到 外 面 运 动 */ 


border: solid 1px red: 
width: 250px: height: 250px; 


} 
#box {/* 定义 运动 小 方 盒 的 样式 */ 
position: absolute; 
left: 0: top: 0; 
width: S0px: height: S0px: 
background: #93FB40; 
border-radius: 8px; 
box-shadow: 2px 2px 2px #999; 
族 定 义 帧 动画 : 名 称 为 ball. 动画 时 长 为 5 秒 ,动画 类 型 为 匀速 渐变 ， 动 画 无 限 播放 */ 
animation: ball 5s linear infinite; 


| 

, | 
店 定 义 关键 帧 : 共 包 括 5 帧 ， 分 别 在 总 时 长 09%9、25%、50%、75%、100% 的 位 置 */ | 
片 每 帧 中 设置 动画 属性 为 left 和 top. 让 它们 的 值 匀速 渐变 ， 产 生 运动 动画 */ | 
@keyframes ball { | 

0% {left: 0: top: 0: } | 

25% {left: 200px: top: 0; } 

50% {left: 200px: top: 200px: } | 

75% {left: 0; top: 200px; } | 

100% {left: 0: top: 0: } 
</style> 
<div id="wrap"> 

<div id="box"></div> 
</div> 


SO ew -se 


| 


图 16.25 ”设计 小 方 盒 运动 动画 
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a VV ( 蕉 课 靖 多 县 ) 


16.3.2 设置 动画 属性 


| 在 于 
过 
| 及 定 


ee 与 Transitions 功能 相同 ， 都 是 通过 改变 元 素 的 属性 值 来 实现 动画 效果 的 。 它 们 的 区 别 
Transitions 功能 时 只 能 通过 指定 属性 的 开始 值 与 结束 值 ， 然 后 通过 在 这 两 个 属性 值 之 间 进 行 平滑 


an 因此 不 能 实现 比较 复杂 的 动画 效果 ; 而 Animations 则 通过 定义 多 个 关键 帧 以 


丰 


义 每 个 关键 帧 中 元 素 的 属性 值 来 实现 更 为 复杂 的 动画 效果 。 
1. 定义 动画 名 称 
使 用 animation-name 属性 可 以 定义 CSS 动画 的 名 称 ， 语 法 如 下 。 


animation-name: none | IDENT [.none|IDENT ]#: 


初始 值 为 none， 定 义 一 个 适用 的 动画 列表 。 每 个 名 字 是 用 来 选择 动画 关键 帧 ， 从 而 提供 动画 的 属性 值 。 


| 如 名 称 是 none， 那 么 就 不 会 有 动画 。 


2. 定义 动画 时 间 

使 用 animation-duration 属性 可 以 定义 CSS 动画 播放 时 间 ， 语 法 如 下 。 

animation-duration: <time> [, <time>]*#: 

在 默认 情况 下 该 属性 值 为 0， 这 意味 着 动画 周期 是 直接 的 ， 即 不 会 有 动画 。 当 值 为 负 值 时 ， 则 被 视 为 0。 
3， 定义 动画 类 型 

使 用 animation-timing-function 属性 可 以 定义 CSS 动画 类 型 ， 语 法 如 下 。 


animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier ( <number>. <number>, number>, 
<number> )[, ease | linear |ease-in | ease-out | ease-in-out | cubic-bezier ( <number>, <number>, <number>, <number> ) ]* 


初始 值 为 ease， 取 值 说 明 可 参考 16.2.4 小 节 介 绍 的 过 渡 动 画 类 型 。 

4. 定义 延迟 时 间 

使 用 animation-delay 属性 可 以 定义 CSS 动画 延迟 播放 的 时 间 ， 语 法 如 下 。 
animation-delay: <time> [, <time>]*: 


该 属性 允许 一 个 动画 开始 执行 一 段 时 间 后 才 被 应 用 。 当 动画 延迟 时 间 为 0， 即 默认 动画 延迟 时 间 ， 则 意 


| 味 着 动画 将 尽快 执行 ， ee 


时 
| 动画 


5. 定义 播放 次 数 
使 用 animation-iteration-count 属性 定义 CSS 动画 的 播放 次 数 ， 语 法 如 下 。 


animation-iteration-count: infinite | <number> [. infinite | <number>]*: 


默认 值 为 1， 这 意味 着 动画 将 播放 从 开始 到 结束 一 次 。infinite 表示 无 限 次 ， 即 CSS 动画 永远 重复 。 如 


取 值 为 非 整 数 ， 将 导致 动画 结束 一 个 周期 的 一 部 分 。 如 果 取 值 为 负 值 ， 则 将 导致 在 交 蔡 周期 内 反 向 播放 
虽 |。 
6. 定义 播放 方向 


使 用 animation-direction 属性 定义 CSS 动画 的 播放 方向 ， 基 本 语法 如 下 。 
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animation-direction: normal | alternate [. normal | alternate]#: 


默认 值 为 normal。 当 为 默认 值 时 ， 动 画 的 每 次 循环 都 向 前 播放 。 另 一 个 值 是 alternate， 设置 议 值 表示 第 | 
偶数 次 向 前 播放 ， 第 奇数 次 向 反方 向 播放 。 

7. 定义 播放 状态 

使 用 animation-play-state 属性 定义 动画 正在 运行 还 是 暂停 ,语法 如 下 。 

animation-play-state: pausedjrunning: 

初始 值 为 mnning。 其 中 paused 定义 动画 已 暂停 ，running 定义 动画 正在 播放 。 


党 提示 : 可 以 在 JavaScript 中 使 用 该 属性 ， 这 样 就 能 在 播放 过 程 中 暂停 动画 。 在 JavaScript 脚本 中 的 用 法 
其 下 < 
object.style.animationPlayState="paused" 


8. 定义 播放 外 状态 
使 用 animation-fill-mode 属性 定义 动画 外 状态 ， 语 法 如 下 。 


animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both ]* 


初始 值 为 none， 如 果 提 供 多 个 属性 值 ， 则 以 逗号 进行 分 喇 。 取 值 说 明 如 下 。 

回 none: 不 设置 对 象 动画 之 外 的 状态 。 

回 forwards: 设置 对 象 状态 为 动画 结束 时 的 状态 。 

回 backwards: 设置 对 象 状态 为 动画 开始 时 的 状态 。 

回 both: 设置 对 象 状态 为 动画 结束 或 开始 的 状态 。 

【示例 】 下 面 的 示例 设计 了 一 个 小 球 ， 并 定义 它 水 平 向 左 运动 动画 结 束 之 后 ， 再 返回 起 始点 位 置 , 效 | 
果 如 图 16.26 所 示 。 


<style> 
让 启动 运动 的 小 球 ， 并 定义 动画 结束 后 返回 */ 
.ball{ 

width: SOpx: height: 50px: 

background: #93FB40: 

border-radius: 100%:; 

box-shadow: 2px 2px 2px #999: 

animation: ball 1s ease backwards: 


y 
族 定 义 小 球 水 平 运动 关键 巾 */ 
@keyframes ball{ 
0% {transform: translate(0. 0): } 
100% {transform: translate(400px): } 
> 
</style> 
<div class="ball"></div> 
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图 16.26 设计 运动 小 球 最 后 返回 起 始点 位 置 


16.4 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 和 提升 CSS3 动画 的 设计 技法 。 


| 16.4.1 设计 图 形 


设计 莹 形 效果 如 图 16.27 所 示 。 设 计 平 行 四 边 形 效果 如 图 16.28 所 示 。 


回 和 
x x 线 上 阅读 
Ce HO- hep//ocalhe - B CHB ochos Pale HO- EG hepyocho- - BC ohost 


图 16.27 ”设计 姜 形 图 16.28 ”设计 平行 四 边 形 
设计 星 形 效果 如 图 16.29 所 示 。 设 计 心 形 效 果 如 图 16.30 所 示 。 具 体 代码 解析 请 扫 码 学 习 。 


Oo- -ole | <¢ | Car Tr Fy 


图 16.29 设计 星 形 图 16.30 设计 心 形 
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16.4.2 ”设计 冒 泡 背景 按钮 


本 节 示 例 应 用 CSS3 过 滤 动画 特效 ， 为 按钮 背景 图 像 定 义 动态 移动 效果 ， 设 计 当 鼠标 经 | 
过 时 ， 按 钮 背景 绚丽 多 彩 ， 不 断 产 生 冒 泡 的 动画 效果 ， 如 图 16.31 所 示 。 具 体操 作 步 又 请 扫 码 “全 要， 


学 习 。 


图 16.31 设计 背景 冒 泡 效果 的 按钮 样式 


16.4.3 ”设计 动画 效果 菜单 


线 上 阅读 | 
本 节 示例 利用 CSS3 过 渡 动画 设计 一 个 界面 切换 的 导航 菜单 ， 当 鼠标 经 过 菜单 项 时 ， 会 以 动画 形式 从 中 | 
文 界面 缓慢 翻转 到 英文 界面 ， 或 者 从 英文 界面 翻转 到 中 文 界面 ， 效 果 如 图 16.32 所 示 。 具 体操 作 步 骤 请 扫 码 | 


学 习 。 


< ETTTTTTTTRTTTTRET Brnos ”> 关 


图 16.32 设计 动画 翻转 菜单 样式 


16.4.4 设计 照片 特效 


本 节 示 例 使 用 CSS3 阴影 、 透 明 效 果 ， 以 及 变换 ， 在 默认 状态 下 ， 让 图 片 随意 地 贴 在 墙 上 ， 当 鼠标 移动 | 
到 图 片上 时 ， 会 自动 放大 并 垂直 摆 放 ， 演 示 效 果 如 图 16.33 所 示 。 具 体 代码 解析 请 扫 码 学 习 。 | 


图 1633 设计 挂图 效果 | 
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16.4.5 设计 立体 盒子 


| 使 用 2D 多 重 变换 制作 一 个 正方 体 ， 演 示 效 果 如 图 16.34 所 示 ; 使 用 3D 多 重 变 换 制作 一 
| 个 正方 体 ， 演 示 效 果 如 图 16.35 所 示 。 具 体 代码 解析 请 扫 码 学 习 。 


€ | GEEIEIIOEEII FT ， 刀 志 


NI 


图 16.34 设计 2D 变换 盒子 


16.4.6 旋转 盒子 


| 继续 以 上 节 示 例 为 基础 ， 使 用 animation 属性 设计 盒子 旋转 显示 。 有 具体 说 明和 操作 步 又 请 扫 码 学 习 
| 


16.4.7 ”设计 翻转 广告 
本 节 示例 设计 当 鼠 标 移动 到 产品 图 片上 时 ， 产 品 信息 翻转 滑 出 ， 效 果 如 图 16.36 所 示 。 在 信和 
| 默认 状态 下 只 显示 产品 图 片 ， 而 产品 信息 隐藏 不 可 见 。 当 用 户 鼠 标 移动 到 产品 图 像 上 时 ， 产 

| 品 图 像 慢 慢 往 上 旋转 使 产品 信息 展示 出 来 ， 而 产品 图 像 慢 慢 隐藏 起 来 ， 看 起 来 就 像 是 一 个 旋转 的 盒子 。 具 
| 体 代码 解析 请 扫 码 学 习 。 
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(a ) 默认 状态 (b ) 翻转 状态 
图 16.36 设计 3D 翻转 广告 牌 
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16.4.8 设计 跑步 效果 


本 节 示 例 设计 一 个 跑步 动画 效果 ， 主 要 使 用 CSS3 帧 动画 控制 一 个 序列 人 物 跑步 的 背景 图 像 ， 
在 页 面 固定 “镜头 ”中 快速 切换 实现 动画 效果 ， 如 图 1637 所 示 。 具 体操 作 步 又 请 扫 码 学 习 。 


图 16.37 设计 跑步 的 小 人 


16.4.9 ”设计 折 又 面板 


本 节 示 例 使 用 CSS3 的 目标 伪 类 ( : target ) 设计 折 私 面 板 效 果 ， 没 有 使 用 JavaScript 脚本 ， 使 用 过 流 属 ， 
性 设计 滑动 效果 ， 折 生动 画 效果 如 图 16.38 所 示 。 具 体 代 码 解 析 请 扫 码 学 习 。 


图 16.38 设计 折叠 面板 


16.$ 在线 练习 


本 节 将 通过 大 量 的 上 机 示例 ， 帮 助 读 者 练习 使 用 HIMLS 设计 动画 样式 。 感 兴趣 的 读者 可 以 扫 码 练习 。 | 
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综合 实战 : 设计 响应 式 网 站 


随 着 各 种 智能 设备 的 推广 和 普及 ， 网 站 的 建设 者 需要 让 访问 者 能 够 通过 智能 手机 、 
平板 电脑 、 笔 记 本 电脑 、 和 台式 计算 机 、 电 视 机 ， 以 及 未 来 任何 可 以 上 网 的 设备 效 取 信 
息 。 响 应 式 Web 设计 就 是 由 此 诞生 的 。 本 章 将 通过 一 个 综合 案例 讲解 如 何 构建 在 各 种 
设备 上 都 能 正常 工作 的 网 站 ， 它 能 根据 设备 的 功能 和 将 征 对 布局 进行 调整 。 


【学 习 重 点 】 

I 创建 可 伸缩 图 像 。 

Pl 创建 弹性 布局 网 格 。 
I 理解 和 实现 媒体 查询 。 
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17.1 认识 响应 式 Web 设计 


网 站 设计 主要 有 两 大 类 型 : 固定 宽度 和 响应 式 。 

对 于 固定 (fixed ) 布局 ， 整 个 页 面 和 每 一 栏 都 有 基于 像素 的 宽度 。 顾 名 思 义 ， 无 论 是 使 用 智能 手机 和 
平板 电脑 等 较 小 的 设备 查看 页 面 ， 还 是 使 用 桌面 浏览 器 并 对 窗口 进行 缩小 ， 它 的 宽度 都 不 会 改变 。 在 引入 
响应 式 Web 设计 之 前 ， 这 是 大 多 数 网 站 选用 的 布局 方式 ， 也 是 学 习 CSS 时 最 容易 掌握 的 布局 方式 。 

响应 式 页 面 也 称 为 流 式 (fluid 或 liquid ) 页 面 ， 它 使 用 百分数 定义 宽度 ， 允 许 页 面 随 显示 环境 的 改变 进 
行 放大 或 缩小 。 除 了 具有 流动 栏 ， 响 应 式 页 面 还 可 以 根据 屏幕 尺寸 以 特定 方式 调整 其 设计 。 例 如 ， 可 以 更 
改 图 像 大 小 或 者 调整 每 一 栏 ， 使 其 大 小 更 合适 。 这 就 可 以 在 使 用 相同 HTML 的 情况 下 ， 为 移动 用 户 、 平 板 
电脑 用 户 和 桌面 用 户 定制 单独 的 体验 ， 而 不 是 提供 三 个 独立 的 网 站 。 

没有 一 种 布局 方式 可 以 适用 于 所 有 的 情景 。 不 过 ， 随 着 智能 手机 和 平板 电脑 的 广泛 使 用 ， 未 来 一 定 还 
会 出 现 各 种 不 同 尺寸 的 智能 设备 ， 因 此 在 设计 网 页 时 有 必要 将 网 站 做 成 响应 式 布 局 。 这 也 是 每 天 都 有 大 量 
响应 式 网 站 出 现 的 原因 。 

【拓展 】 

响应 式 Web 设计 起 源 于 Ethan Marcotte， 他 创造 了 术语 “响应 式 Web 设计 ”( responsive Web design )， 
并 向 大 家 介绍 了 创建 响应 式 网 站 的 技术 。 人 们 首次 广泛 关注 这 种 方法 始 于 他 发 表 在 A List Apart 上 的 文章 
( www.alistapart.com/articles/responsive-web-design/ )。 他 在 Responsive Web Design 一 书 中 对 此 做 了 更 为 深入 
细致 的 探讨 。 

Ethan Marcotte 的 方法 包含 以 下 3 点 。 

加 灵活 的 图 像 和 媒体 。 图 像 和 媒体 资源 的 尺寸 是 用 百分数 定义 的 ， 从 而 可 以 根据 环境 进行 缩放 。 

回 灵活 的 、 基 于 网 格 的 布局 ， 也 就 是 流 式 布 局 。 对 于 响应 式 网 站 ， 所 有 的 width 属性 都 用 百分数 设 

定 ， 因 此 所 有 的 布局 成 分 都 是 相对 的 。 其 他 水 平 属 性 通常 也 会 使 用 相对 单位 ( 如 em、 百分数 和 
rem 等 )。 

回 ”媒体 查询 。 使 用 这 项 技术 ， 可 以 根据 媒体 特征 ( 如 浏览 器 可 视 页 面 区 域 的 宽度 ) 对 设计 进行 调整 。 

John Allsopp 于 2000 年 发 表 “Web 设计 之 道 ”( 4 Dao of Web Desiegn,， http: //alistapart.com/article/dao )， 
该 文 讨论 了 设计 和 构建 灵活 的 网 站 的 方法 。 这 篇 文章 是 响应 式 Web 设计 的 先驱 ，Ethan Marcotte 以 及 很 多 其 
他 作者 都 引用 过 这 篇 文章 ， 影 响 巨 大 。Jeremy Keith 在 题 为 “One Web” 的 演讲 中 归纳 了 “一 个 网 站 适应 所 
有 设备 ”的 方法 。 

【参考 】 

Screen Sizes 网 站 ( http: //screensiz.es ) 提供 了 流行 设备 和 显示 屏 的 分 辩 率 以 及 设备 宽度 信息 。 使 用 媒 
体 查询 的 时 候 ， 这 些 信 息 很 有 用 。 

Maximiliano Firtman 维护 了 一 个 现代 移动 设备 对 HIML5 和 CSS3 支持 情况 的 表格 ,参考 http: // 
mobilehtml5.org。 其 中 大 量 信 息 属 于 HTMLS5 高 级 特性 。 


17.2 构建 页 面 


高 效 网 页 的 核心 是 结构 良好 、 语 义 化 的 HTML。 下 面 就 来 具体 介绍 如 何 构 建 本 章 案例 的 具体 结构 ， 操 
作 步 又 如 下 。 
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| 

| 

| 

| 第 1 步 ， 恰当 地 使 用 article 、aside 、nav、section 、header、footer 和 div 等 元 素 将 页 面 划分 成 不 同 的 逻 
| 辑 区 块 。 本 例 创建 了 一 个 虚构 博客 ， 页 面 结构 要 点 说 明 如 下 。 
| 

| 

| 


回 使 用 3 个 div 元 素 ， 其 中 一 个 将 整个 页 面包 起 来 ， 另外 两 个 将 两 部 分 主体 内 容 区 域 包 起 来 以 便 应 


全 让 样式 设计 。 

回 ”用 作 报头 的 header 元 素 ， 包 括 标识 、 社 交 媒体 网 站 链接 和 主导 航 。 
| 加 ”划分 为 多 个 博客 条 目 section 元 素 的 main 元 素 ， 其 中 每 个 section 元 素 都 有 自己 的 页 脚 。 
| 回 附注 栏 div 元素 (同时 使 用 了 article 和 aside 元 素 )， 提 供 了 关于 博客 作者 和 右 栏 (应 用 CSS 之 后 
| 就 有 了 ) 博客 条 目的 链接 。 
| 回 页 面 级 footer 元 素 ， 包 含 版 权 信 息 等 内 容 。 

| 


| 第 2 步 ， 按 照 一 定 的 顺序 放置 内 容 ， 确 保 页 面 在 不 使 用 CSS 的 情况 下 也 是 合理 的 。 例 如 ， 首 先是 报头 ， 
| 接着 是 主体 内 容 ， 然 后 是 一 个 或 多 个 附注 栏 ， 最 后 是 页 面 级 的 页 脚 。 将 最 重要 的 内 容 放 在 最 上 面 ， 对 于 智 
| 能 手机 和 平板 电脑 等 小 屏幕 用 户 来 说 ， 不 用 滚动 太 远 就 能 获取 主体 内 容 。 此 外 ， 搜 索引 擎 “看 到 ”的 页 面 
| 也 类 似 于 未 应 用 CSS 的 页 面 ， 因此， 如 果 将 主体 内 容 提前 ， 搜 索引 擎 就 能 更 好 地 对 网 站 进行 索引 。 这 同样 
| 也 会 让 屏幕 阅读 器 用 户 受益 。 

| 第 3 步 ， 以 一 致 的 方式 使 用 标题 元 素 (hl~h6 )， 从 而 明确 地 标识 页 面 上 这 些 区 块 的 信息 ， 并 对 它们 按 
| 优先 级 排序 。 

| 第 4 步 ， 使 用 合适 的 语义 标记 剩余 的 内 容 ， 如 段落 、 图 和 列表 

| 第 5 步 ,， 如 果 有 必要 ,使 用 注释 来 标识 页 面 上 不 同 的 区 域 及 其 内 容 。 根 据 个 人 习惯 ， 选 用 一 种 不 同 的 
| 注释 格式 标记 区 块 的 开始 ( 而 非 结束 )。 

页 面 基本 框架 结构 代码 如 下 。 


<div class="page"> 
<!-- 一 一 开始 报关 一 一 -> 
<header class="masthead" role="banner"> 
<p class="logo"><a href="/"><img /></a></p> 
<ul class="social-sites">[ 社交 图 片 链接 ]</ul> 
<nav role="navigation">[ 主导 航 链接 列表 ]</nav> 
</header> 
<!-- 结束 报头 -> 
<div class="container"> 
<!-- 一 开始 主体 内 容 一 一 -> 
<main role="main"> 
<section class="post"> 
<hl>[ 文章 标题 ]</hl> 
<img class="post-photo-full" /> 
<div class="post-blurb"> 
<p>[ 正文 内 容 ]</p> 
</div> 
<footer class="footer">[ 博客 条 目 页 脚 ]</footer> 
</section> 
<section class="post"> 
<hl>[ 文章 标题 ]</hl> 
<img class="post-photo" /> 
<div class="post-blurb"> 
<p>[ 正文 内 容 ]<p> 
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</div> 
<footer class="footer">[ 博客 条 目 页 脚 ]</footer> 
</section> 
<nav role="navigation"> 
<ol class="pagination">[ 链接 列表 项 ]</ol> 
</nav> 
</main> 
<!-- 结束 主体 内 容 -> 
<!-- 一 一 开始 附注 栏 一 一 --> 
<div class="sidebar"> 
<article class="about"> 
<h2> 关于 自己 </h2> 
</article> 
<div class="mod"> 
<h2> 我 的 经 历 </h2> 
…[ 映 射 图 像 ] .… </div> 
<aside class="mod"> 
<h2> 热门 职位 </h2> 
<ul class="links">[ 链接 列表 项 ]</ul> 
</aside> 
<aside class="mod"> 
<h2> 最 近 分 享 </h2> 
<ul class="links">[ 链接 列表 项 ]</ul> 
</aside> 
</div> 
<!-- 结束 附注 栏 -> 
</div> 
<!-- 结 束 容器 -> 
<L- 一 一 开始 页 脚 一 一 -> 
<footer role="contentinfo" class="footer"> 
<p class="legal"><small>[ 版 权 信息 ]</small></p> 
</footer> 
<!-- 结束 页 脚 -> 
</div> 
<!-- 结束 页 面 -> 


在 上 面 的 结构 中 ,使 用 section 元 素来 标记 每 个 包含 部 分 博文 的 条 目 。 如 果 它 们 是 完整 的 博文 条 目 , 就 | 


应 该 使 用 article 元 素来 标记 它们 ， 例 如 ， 在 单独 的 、 完 整 的 博客 文章 页 内 。 对 它们 使 用 article 替代 section | 


也 可 以 ， 只 要 代表 这 一 段 代 码 可 以 成 为 独立 的 内 容 即 可 。 


第 6 步 ， 保存 文档 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 17.1 所 示 ， 除 了 浏览 器 默认 样式 以 外 并 
是 有 一 点 | 


置 其 他 样式 。 这 个 页 面 是 一 栏 的 。 由 于 它 的 语义 结构 非常 好 ， 页 面 是 完全 可 用 ， 且 可 理解 的 ， 只 
朴素 。 
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| leero 次 Bloo 


网 页 端 「 应 用 跳 转 」 技 术 实现 演变 


sa oom Beta 03 


um 一 
从 村 关 ' 疝 -有 质量 " 达 进 教育 至 国 ， 托 
起 明天 的 荐 记 San@® 
Wa 

从 " 广 本 着 "向 “有 质量 " 近 进 ， 教 育 强国 ， 
nn 托 起 阴 天 的 着 刘 


| 一 -= pe 
| 图 17.1 页 面 结构 默认 显示 效果 
| 


17.3 设计 基本 样式 


| “构建 并 完善 页 面 结构 和 内 容 之 后 ， 下 面 就 来 重点 介绍 网 页 样式 的 设计 。 
| pm 
| 

| 


| 痊 提示 : 在 学 习 之 前 ， 读 者 应 该 有 一 定 的 CSS 基础 ， 等 入 门 后 再 接着 学 习 。 


17.3.1 兼容 早期 浏览 器 

| 

| 现代 浏览 器 原生 支持 HTMLS5 新 增 结构 元 素 。 从 样式 的 角度 来 说 ， 这 意味 着 浏览 器 将 为 这 些 新 的 元 素 应 
| 用 默认 样式 。 例 如 ，article、footer、header、nav 以 及 其 他 一 些 元 素 显 示 为 单独 的 行 ， 就 像 div、blockquote、 
| p 以 及 其 他 在 HIMLS 之 前 的 版 本 中 称 作 块 级 元 素 。 
| 第 1 步 ， 大 部 分 浏览 器 允许 对 它们 并 不 原生 支持 的 元 素 添加 样式 ， 样 式 代 码 如 下 。 
| 

| 


article., aside, figcaption, 人 gure. footer header main, nav., section { 
display: block: 
大 多 数 浏览 器 默认 将 它们 无 法 识别 的 元 素 作为 行内 元 素 处 理 。 因 此 这 段 CSS 样式 代码 将 强制 HTML5 
| 新 语义 元 素 显示 在 单独 的 行 。 
| 


这 提示 : 如 果 使 用 CSS 重 置 或 normalize.css， 可 以 跳 过 这 一 步 ， 它 们 会 包含 这 里 的 代码 。 
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JavaScript。 在 每 个 页 面 的 head 元 素 ( 注意 不 是 header 元 素 ) 中 添加 下 面 的 代码 ， 实 现在 IE9 之 前 的 正中 
为 新 的 HIMLS 元 素 设 置 样式 。 | 
<L-[fltIE 9]> 
<script sre="js/html$sshiv.js"></script> 
<![endif]--> 


| 
| 
第 2 步 ， 会 忽略 它们 不 原生 支持 的 元 素 的 CSS。HTMLS shiv 是 专门 用 于 解决 这 一 问题 的 县 | 
| 
| 
| 


17.3.2 ” 重 置 默认 样式 


每 个 浏览 器 都 有 内 置 的 默认 样式 表 。HTML 会 遵照 该 样式 表 显 示 网 页 。 整 体 上 ， 不 同 浏览 器 提供 的 时 
认 样 式 表 是 相似 的 ， 但 也 存在 一 定 的 差异 。 为 此 ， 开 发 人 员 在 应 用 他 们 自己 的 CSS 之 前 ， 常 常 需要 抹 平 这 | 
些 差异 。 抹 平 差异 的 方法 主要 有 以 下 两 种 。 
回 使 用 CSS 重 置 (reset ) 样式 表 ， 如 Eric Meyer 创建 的 Meyer 重 置 (http: //meyerweb. oileiialioalr| | 
css/reset/ )。 另 外 还 有 其 他 的 一 些 重 置 样式 表 。 
回 使 用 Nicolas Gallagher 和 Jonathan Neal 创建 的 normalize.css 开始 主 样式 表 。 该 样式 表 位 于 http: | | 
necolas.github.com/normalize.css/, 
CSS 重 置 可 以 有 效 地 将 所 有 默认 样式 都 设 为 “ 零 "。 第 二 种 方法 ， 即 normalize.css， 则 采取 了 不 同 的 方 | 
式 。 它 并 非 对 所 有 样式 进行 重 置 ， 而 是 对 默认 样式 进行 微调 ， 这 样 确保 在 不 同 的 浏览 器 中 具有 相似 的 外 观 。 | 


用 户 也 可 以 保留 浏览 器 的 默认 样式 ， 并 自己 编写 相应 的 CSS。 如 果 确 实 要 使 用 normalize.ess 或 CSS 重 | 
置 ， 也 不 必 保留 它们 提供 的 所 有 CSS。 本 章 示 例 使 用 了 normalize.css 中 的 一 部 分 代码 ， 并 对 文本 添加 了 一 | 
些 样 式 ， 形 成 一 个 初始 的 页 面 。 | 


谨 在 方向 更 改 后 防止 iOS 文本 大 小 调整 ， 而 不 禁用 用 户 缩放 */ 
html { 

-ms-text-size-adjust: 100%; 

-webkit-text-size-adjust: 100%; 


} 
此 删除 默认 边 距 */ 
人 人 0:} 


链接 样式 中 ， 解 决 Chrome 与 其 他 浏览 器 之 间 的 "outline" 不 一 致 问题 */ 
a: focus { outline: thin dotted: } 

a: active. a: hover { outline: 0: } 

让 在 所 有 浏览 器 中 解决 不 一 致 和 可 变 的 字体 大 小 */ 

small { font-size: 80%: } 

此 在 下 8 和 IE9 中 的 a 元 素 中 删除 边框 */ 

img { border: 0: } 


17.4 设计 响应 式样 式 


上 一 节 介绍 了 网 页 基本 样式 的 设计 ， 当 然 限 于 篇 幅 ， 我 们 没有 面面俱到 ， 读 者 可 以 参考 示例 源 代码 ， 
了 解 更 详细 的 样式 代码 。 下 面 重点 介绍 页 面 的 响应 式样 式 设计 过 程 。 
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17.4.1 创建 可 伸缩 图 像 


| 在 默认 情况 下 ,图 像 显 示 的 尺寸 是 HTML 中 指定 的 width 和 height 属性 值 。 如 果 不 指定 这 些 属性 值 ， 
| 图 像 就 会 自动 按照 其 原始 尺寸 显示 。 此 外 ， 可 以 通过 CSS 以 像素 为 单位 设置 width 和 height。 显 然 ， 当 屏 
幕 宽 度 有 限 的 时 候 ， 按 原始 尺寸 显示 图 像 就 不 一 定 合适 了 。 使 用 可 伸缩 图 像 技 术 ， 就 可 以 让 图 像 在 可 用 空 
| 间 内 缩放 ， 但 不 会 超过 其 本 来 的 宽度 。 
| 为 图 像 添加 如 下 类 样式 。 


.post-photo, .post-photo-full { 
max-width: 100%; 


这 样 可 伸缩 图 像 可 以 根据 包含 它们 的 元 素 ( 本 例 为 body ) 的 尺寸 按 比 例 缩放 。 它 们 不 会 比 其 本 来 的 宽 
| 度 更 宽 ， 就 像 下 面 的 图 像 所 演示 的 那样 。 

| 一 定 要 使 用 max-width: 100% 而 不 是 width: 100%。 它 们 都 能 让 图 像 在 容器 内 缩放 ， 不 过 ，width: 
| 100% 会 让 图 像 尽 可 能 地 填充 容器 ， 如 果 容 器 的 宽度 比 图 像 宽 ， 图 像 就 会 放大 到 超过 其 本 来 尺寸 ， 有 可 能 会 
| 显得 较为 难看 。 

| 上 面 样式 对 已 经 为 Retina 显示 屏 扩大 到 双 倍 大 小 的 图 像 也 适用 。 当 然 ， 双 售 分 辩 率 的 图 像 的 文件 大 小 
| 也 会 大 很 多 。 

| 可 以 使 用 background-size 属性 对 背景 图 像 进行 缩放 ( 对 IE8 无 效 ) 更 多 信息 参见 www.css3.info/ 
Preview/background-size/。 

次 提示 : 还 可 以 使 用 Video，embed，object{ max-width: 100%; } 让 HTMLS 视频 及 其 他 媒体 变 成 可 伸缩 
| 的 (同样 也 不 要 在 HTML 中 为 它们 指定 width 和 height ) 


| 
| 
| 
| 
| 6 
| 
| 


1742 创建 弹性 布局 网 格 


创建 弹性 布局 需要 使 用 百分数 宽度 ， 并 将 它们 应 用 于 页 面 里 的 主要 区 域 。 
width: percentage: 


| 

| 

| 其 中 ，percentage 表示 希望 元 素 在 水 平方 向 上 占据 容器 空间 的 比例 。 一 般 不 必 设 置 width: 100%; ， 因 
| 为 默认 设置 为 display: block; 的 元 素 ， 如 p 以 及 其 他 很 多 元 素 ， 或 手动 设置 为 display: block; 的 元 素 在 默认 
| 

| 

| 

| 

| 

| 


情况 下 会 占据 整个 可 用 空间 。 
作为 可 选 的 一 步 ， 对 包含 整个 页 面 内容 的 元 素 设置 max-width: value; ， 其 中 value 表示 希望 页 面 最 多 
可 增长 到 的 最 大 宽度 。 通 常 ，value 以 像素 为 单位 ， 不 过 也 可 以 使 用 百分数 、em 值 或 其 他 单位 的 值 。 
还 可 以 对 元 素 设置 基于 百分数 的 margin 和 padding 值 。 在 本 例 页 面 中 ， 对 这 些 属性 使 用 的 是 em 值 ， 这 
| 是 一 种 常见 的 做 法 。 内 边 距 和 外 边 距 的 em 值 是 相对 于 元 素 的 font-size 的 。 
例如， 如果 其 字体 大 小 等 价 于 14 像素 ， 则 width: 10em; 会 将 宽度 设置 为 140 像素 。 而 基于 百分数 的 值 
| 则 是 相对 于 包含 元 素 的 容器 的 。 
| 对 于 设置 了 body { font-size: 100%; } 的 页 面 ， 对 font-size 、margin、padding 和 max-width 使 用 em 值 
| 还 有 一 个 好 处 : 如 果 用 户 更 改 了 浏览 器 默认 字体 大 小 ， 那 么 页 面 也 会 跟着 变 大 或 变 小 。 
| 
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| 

| 

| 

| 

< 注意 : 将 box-sizing 属性 设置 为 borderbox， 就 可 以 很 方便 地 对 拥有 水 平方 向 内 边 距 (使 用 em 或 其 他 

的 单位 ) 的 元 素 定义 宽度 ， 而 不 必 进 行 复杂 的 数学 计算 来 找 出 百分数 的 值 。 这 对 响应 式 页 面 来 | 

说 很 方便 。 | y 

芯 

Note 
17.4.3 ”实现 媒体 查询 


| 
| 
| 
可 以 使 用 下 述 两 种 方式 针对 特定 的 媒体 类 型 定位 CSS。 此 外 ， 还 有 第 三 种 方式 ， 即 使 用 @import 规则 ， 
| 
| 
| 


不 过 一 般 不 建议 使 用 这 种 方法 ， 因 为 它 会 影响 性 能 。 
第 一 种 方式 是 使 用 link 元 素 的 media 属性 ， 位 于 head 元 素 内 。 例 如 : 


<head> 
<link rel="stylesheet" href="your-styles.css" media="screen" /> 
</head> 
第 二 种 方式 是 在 样式 表 中 使 用 @media 规则 。 
个 只 用 于 打印 的 样式 */ 
@media print { | 
header[role="banner"] nav, .ad { | 
display: none; 
} | 
| 
| 
| 


} 


通过 @media print 规则 可 以 创建 专门 为 打印 浏览 器 里 的 页 面 定义 的 样式 ， 也 可 以 将 它们 与 为 其 他 媒体 | 
定义 的 样式 放 在 一 起 。 

媒体 查询 增强 了 媒体 类 型 方法 ， 允 许 根据 特定 的 设备 特性 定位 样式 。 要 调整 网 站 的 呈现 样式 ， 让 其 适 | 
应 不 同 的 屏幕 尺寸 ， 采 用 媒体 查询 特别 方便 。 

CSS3 使 用 @media 规则 定义 媒体 查询 ， 简 化 语法 格式 如 下 。 


@media [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*{ 
族 CSS 样式 列表 */ 
} 


| 
| 
| 
| 
参数 简单 说 明 如 下 。 

回 <media type>: 指定 媒体 类 型 ， 具 体 说 明 参 考 9.2 节 表 9.1。 | 

回 <expression>: 指定 媒体 特性 。 放 在 一 对 圆 括 号 中 ， 如 ( min-width: 400px )。 | 

回 ”逻辑 运算 符 ， 如 and ( 逻辑 与 )、not ( 逻辑 否 )、only ( 兼容 设备 ) 等 。 

媒体 特性 包括 13 种 ， 接 受 单 个 的 逻辑 表达 式 作为 值 ， 或 者 没有 值 。 大 部 分 特性 接受 min 或 max 的 前 | 
级 ， 用 来 表示 大 于 等 于 ， 或 者 小 于 等 于 的 逻辑 ， 以 此 避免 使 用 大 于 号 (> ) 和 小 于 号 (<) 字符 。 下 面 列 出 
了 可 以 包含 在 媒体 查询 里 的 媒体 特性 。 | 
width ( 宽度 ) | 
height ( 高 度 ) | 
device-width ( 设备 宽度 ) | 
device-height ( 设备 高 度 ) 
orientation (方向 ) | 
aspect-ratio ( 高 宽 比 ) | 


办 办 办 轨 
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二 加 


device-aspect-ratio ( 设备 高 宽 比 ) 
color ( 颜色 ) 
color-index ( 颜色 数 ) 
monochrome ( 单 色 ) 
resolution ( 分 辩 率 ) 
scan ( 扫描 ) 
grid ( 栅 格 ) 
还 有 如 下 一 些 非 标准 的 媒体 特性 。 
回 -webkitrdevice-pixel-rati ( WebKit 设备 像素 比 ) 
回 ”-moz-device-pixel-ratio ( Mozilla 设备 像素 比 ) 
除了 orientation、scan 和 grid 以外， 上述 属 性 均 可 添加 min- 和 max- 前 级 。min- 前 级 定位 的 是 “大 于 
Bb 于 ”对 应 值 的 目标 ， 而 max- 前 绷 定 位 的 则 是 “小 于 等 于 ”对 应 值 的 目标 。 
CSS3 媒体 查询 规范 中 列 出 了 关于 所 有 媒体 特性 的 描述 ( www.w3.org/TR/css3-mediaqueries/#medial )。 
以 下 是 媒体 查询 的 基本 语法 。 
回 指向 外 部 样式 表 的 链接 。 
// 下 面 代 码 定义 了 如 果 页 面 通过 屏幕 呈现 ， 且 屏幕 宽度 不 超过 480px， 则 加 载 shetland.css 样式 表 。 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> 


回 ”位 于 样式 表 中 的 媒体 查询 。 


@media logic type and (feature: value) { 
谨 目 标 CSS 样式 规则 写 在 这 里 */ 


加 回回 网 网 罗网 


对 于 响应 式 页 面 ， 大 多 数 情况 下 我 们 需要 将 媒体 查询 放 到 样式 表 中 。 
让 常规 样式 写 在 这 里 。 


每 个 设备 部 能 获取 它们 ， 除 非 被 媒体 查询 中 的 样式 规则 著 盖 */ 


body { font: 200%/1.3 sans-serif: } 
Pp {color: green: } 
谨 以 下 针对 不 同 的 设备 进行 定制 */ 
@media (max-width: 600px) { 
族 匹 配 界面 宽度 小 于 等 于 600px 的 设备 */ 
} 
@media (min-width: 400px) { 
族 匹配 界面 宽度 大 于 等 于 400px 的 设备 */ 
@media (max-device-width: 800px) { 
族 匹配 设备 (不 是 界面 ) 宽度 小 于 等 于 800px 的 设备 */ 
@media (min-device-width: 600px) { 
谨 匹配 设备 ( 不 是 界面 ) 宽度 大 于 等 于 600px 的 设备 */ 


本 章 示例 设计 的 媒体 查询 样式 如 下 。 
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/* 480-767-only */ 
@media only screen and (min-width: 30em) and (max-width: 47.9375em) { 
以 边 栏 7 
-about { overflow: hidden: } 
-about img { 
float: left: 
margin-right: 15px; 
是 
} 
/* 600-767-only */ 
@media only screen and (min-width: 37.5em) and (max-width: 47.9375em) { 
证 边栏 
.about { padding-bottom: 1.4em; } 
} 
/*768+ */ 
@media only screen and (min-width: 48em) { 
hl { font-size: 2.2Sem: } 
谍报 头 */ 
.masthead { padding-top: 10px: } 
.nav-main { margin-bottom: 0: } 
店主 要 内 容 */ 
.container { 
background: url(img/bg.png) repeat-y 65.938% 0; 
padding-bottom: 1.9375em: 


} 
main { 
float: left; 
width: 62.5%:; 
} 
main > .post: first-child > hl { margin-top: 0.904em: } 
.post-blurb p { 
font-size: lem: 
line-height: 1.4: 
} 


.post-footer { 
padding-bottom: .7em:; 
padding-top: .7em: 
} 
.footer p { font-size: 0.688em: } 
.pagination { margin-top: 45px: } 
让 边 栏 */ 
.sidebar { 
float: right: 
margin-top: 1.875em: 
width: 31.25%: 
} 
-about p { font-size: 0.813em: } 
启 页 脚 */ 
footer[role="contentinfo"] { border-top: 1px solid #cacbcb: } 


.471。 


Note 
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T 
| 

| 

| 

} 

上 一 结束 媒体 查询 一 
| 最 后 ， 还 需要 在 头 部 区 域 设 置 视 口 ， 即 视觉 区 域 ( Viewport )。 

| <meta name="viewport" content="width=device-width, initial-scale=1" /> 


全 用 
Wotej 
这 段 代 码 的 重点 是 width=device-width。 有 了 这 条 语句 ， 视 觉 区 域 的 宽度 会 被 设 成 与 设备 宽度 ( 对 
| iphone 来 说 为 320 像素 ) 相同 的 值 ， 因 此 在 纵向 模式 下 该 宽度 的 页 面 内 容 会 填充 整个 屏幕 。 如 果 不 包含 这 一 
| 语句 ， 使 用 媒体 查询 的 min-width 和 maxwidth 特性 将 不 会 得 到 预期 的 结果 。 
| 代码 中 的 initial-scale=1 部 分 对 width 和 device-width 值 没有 影响 ， 但 通常 会 包含 这 一 语句 。 它 将 页 面 的 
| 默认 缩放 级 别 设 成 了 100%， 换 成 纵向 模式 也 一 样 。 如 果 不 设置 initial-scale=1， 在 iPhone 中 ， 手 机 从 纵向 
| 模式 改 为 横向 模式 时 ， 网 页 会 被 放大 ， 从 而 使 布局 与 纵向 模式 一 致 。 


| 


提示 : 视觉 区 域 (Viewport ) 指 的 是 浏览 器 ( 包括 桌面 浏览 器 和 移动 浏览 器 ) 显示 页 面 的 区 域 。 它 不 
| 包含 浏览 器 地 址 栏 、 按 钮 等 ， 只 是 浏览 区 域 。 

媒体 查询 的 width 特性 对 应 的 是 视觉 区 域 的 宽度 。 不 过 ，device-width 特性 不 是 ， 它 指 的 是 屏幕 的 宽度 。 
在 移动 设备 ( 如 iPhone ) 上 ， 默 认 情况 下 这 两 个 值 通常 不 一 样 。Mobile Safari ( iPhone 的 浏览 器 ) 的 视觉 区 
| 域 默认 为 980 像素 宽 ， 但 iPhone 的 屏幕 只 有 320 像素 宽 (iPhone 的 Retina 显示 屏 的 屏幕 分 辨 率 有 640 像素 
| 宽 ， 但 它们 是 在 相同 的 空间 挤 入 两 倍 的 像素 ， 因 此 设备 宽度 仍 为 320 像素 )。 

因此 ，iPhone 会 像 设 为 980 像素 宽 的 桌面 浏览 器 那样 显示 页 面 ， 并 将 页 面 缩小 以 适应 320 像素 的 屏幕 
宽度 (在 纵向 模式 下 )。 结 果 ， 当 在 Mobile Safari 中 浏览 大 部 分 为 桌面 浏览 器 建立 的 网 站 时 ， 会 显示 将 这 些 
网 站 缩小 了 的 样子 。 在 横向 模式 下 也 是 这 样 处 理 的 ， 只 不 过 宽度 为 480 像素 (iPhone5 是 568 像素 )。 如 果 

| 不 进行 放大 ， 页 面 通常 是 难以 阅读 的 注意 不 同 设备 的 默认 视觉 区 域 宽度 并 不 相同 )。 


17.4.4 组 合 样式 


| 
| 
| 
| 
理解 了 可 伸缩 图 像 、 弹 性 布局 和 媒体 查询 的 知识 之 后 ， 就 可 以 将 它们 组 合 在 一 起 ， 创 建 响应 式 网 页 。 
| 本 节 将 重点 介绍 页 面 扩张 或 收缩 时 切换 内 容 的 显示 方式 所 需要 考虑 的 要 点 。 重 要 的 是 了 解 如 何 建立 响应 式 
| 网站， 以 及 用 于 实现 响应 式 网 站 的 媒体 查询 类 型 。 完 整 的 样式 需要 读者 参考 示例 源 代码 。 注 意 ， 并 不 需要 
和 完 估 一 个 定 宽 的 设计 . 再 将 它 转换 成 响应 式 的 页 面 。 

第 1 步 , 创建 内 容 和 HIML。 

| ”在 动手 设计 响应 式 设计 之 前 ， 应 该 把 内 容 和 结构 设计 妥当 。 如 果 使 用 临时 占 位 符 设计 和 构建 网 站 ， 当 
| 填 入 真正 的 内 容 以 后 ， 可 能 会 发 现形 式 与 内 容 结合 得 不 好 。 因 此 ， 应 该 尽 可 能 地 将 内 容 采 集 工作 提前 。 具 
| 体操 作 就 不 再 展开 。 

| 在 head 元 素 中 添加 <meta name= "viewport" content="width=device-width，initialscale=1"/>。 关 于 这 行 代 
| 码 的 作用 ， 可 以 参考 上 一 节 说 明 。 

第 2 步 ， 遵 循 移动 优先 为 页 面 设计 样式 ， 推 荐 在 设计 网 页 时 也 遵循 这 一 点 。 

首先 ， 为 所 有 的 设备 提供 基准 样式 。 这 同时 也 是 旧版 浏览 器 和 功能 比较 简单 的 设备 显示 的 内 容 。 基 准 
| 样式 通常 包括 基本 的 文本 样式 (字体 、 颜色 、 大 小 )、 内 边 距 、 边 框 、 外 边 距 和 背景 ( 视 情 况 而 定 )， 以 及 
| 设置 可 伸缩 图 像 的 样式 。 通常， 在 这 个 阶段 ， 需 要 避免 让 元 素 浮动 ， 或 对 容器 设 定 宽度 ， 因 为 最 小 的 屏幕 


并 不 够 宽 。 内 容 将 按照 常规 的 文档 流 由 上 到 下 进行 显示 。 
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访问 性 。 在 不 同 设备 下 , 乡 人 不 过 这 是 在 预期 之 内 的 ， 完 全 可 以 接受 。 
第 3 步 ， 从 基本 样式 开始 ， 使 用 媒体 查询 逐渐 为 更 大 的 屏幕 ， 或 其 他 媒体 特性 定义 样式 ， 如 | 
orientation。 大 多 数 时 候 ， ee 和 max-width 媒体 查询 特性 是 最 主要 的 工具 。 

这 是 渐进 增强 在 实战 中 的 应 用 。 处 理 能 力 较 弱 的 ( 通常 也 是 较 旧 的 ) 设备 和 浏览 器 会 根据 它 人 能 章 角 | 
的 CSS 显示 网 站 相对 简单 的 版 本 。 处 理 能 力 较 强 的 设备 和 浏览 器 则 显示 增强 的 版 本 。 所 有 人 都 能 获取 到 网 ， 
页 的 内 容 。 

上 基准 样式 

= h 


body { 
font 100%/1.2 Georgia, "Times New Roman". serif: 


margin: 0; 


| 
| 
网 站 的 目标 是 在 单列 显示 样式 中 是 清晰 的 、 中 看 的 。 这 样 ， 网 站 对 所 有 的 设备 ( 无 论 新 旧 ) 都 具有 可 | 
| 
| 
| 


Note 


b 

*# 《入 参见 示例 源 代 码 */ 
-Webkit-box-sizing: border-box: 
-moz-box-sizing: border-box: 
box-sizing: border-box: 


font-family: "Lato". sans-serif 
font-size: 2.25em: /* 36px/16px */ 
font-weight: 300: 


| 
| 

| 

} | 
.about h2. .mod h2 {font-size: .875em:} /* 15px/16px */ | 
.logo, .social-sites, .nav-main li {text-align: center: } | 
证 创建 可 伸缩 图 像 */ | 
.post-photo, .post-photo-full, about img. .map { | 
max-width: 10096: | 

} | 


第 4 步 ， 应 用 于 所 有 视觉 区 域 ( 小 屏幕 和 大 屏幕 设备 ) 的 基准 样式 示例 ， 效 果 如 图 17.2 所 示 。 这 些 样 | | 
式 规则 与 上 一 节 介绍 的 代码 是 类 似 的 ， 只 是 它们 没有 由 媒体 查询 包围 。 注 意 ， 本 例 为 整个 页 面 设 定 了 60em | 
的 最 大 宽度 ( 通常 等 价 于 960 像素 )， 并 使 用 auto 外 边 距 让 其 居中 。 还 让 所 有 的 元 素 使 用 boxsizing: border- 
box; ， 将 大 多 数 图 像 设置 为 可 伸缩 图 像 。 | 

图 17.2 是 仅 应 用 了 基础 样式 的 页 面 效果 。 这 个 页 面 在 所 有 的 浏览 器 中 都 是 线性 的 ， 右 侧 的 部 分 出 现在 | 
左 侧 部 分 的 下 面 。 也 是 不 支持 媒体 查询 的 旧 浏览 器 中 页 面 的 显示 效果 。 在 这 种 状态 下 ， 依 然 保持 了 很 高 的 
可 用 性 。 由 于 没有 设 定 容 器 宽度 ， 因 此 在 桌面 浏览 器 中 查看 页 面 时 ， 内 容 的 宽度 会 延伸 至 整个 浏览 器 窗口 
的 宽度 。 
第 5 步 ， 逐步 完善 布局 ， 使 用 媒体 查询 为 页 面 中 的 每 个 断 点 ( breakpoint ) 定义 样式 。 断 点 即 内 容 需 做 | 
适当 调整 的 宽度 。 在 本 章 示例 中 ,应 用 基准 样式 规则 后 ， 为 下 列 断 点 创建 了 样式 规则 。 | 
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网 页 端 「 应 用 跳 转 」 技 术 实现 演 


贞 于 网 页 传 活 的 便捷 性 ， 从 网 页 向 APP 
导 沪 几乎 是 所 及 APP 厂 商 帮 会 采用 的 扒 


图 17.2 页 面 结构 默认 显示 效果 


| 
| 

| 

| 

| @media only screen and (min-width: 20em) { 
| nav-mainli{ 

| border-left: 1px solid #c8c8c8: 
| display: inline-block: 

| text-align: left: 

| 

| .nav-main li: first-child { 

| border-left: none: 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


.nav-maina { 

display: inline-block: 

font-size: lem: 

padding: .Sem .9em .Sem 1.1Sem: 
} 


} 


| 这 里 针对 视觉 区 域 不 小 于 20em 宽 的 浏览 器 修改 了 主导 航 的 样式 。 设 计 body 元 素 字 体 大 小 为 16 像素 的 
| 情况 下 ，20em 通常 等 价 于 320 像素 ， 因 为 20 x 16 = 320。 这 样 ， 链 接 会 出 现在 单独 的 一 行 ， 而 不 是 上 下 堆 
| 琶 ， 如 图 17.3 所 示 。 
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图 17.3 小 屏 显示 效果 


这 里 没有 将 这 些 放 到 基础 样式 表 中 ， 因 为 有 的 智能 手机 屏幕 比较 窗 ， 可 能 会 让 链接 显得 很 局 促 ， 或 者 | 


分 两 行 显示 。 


下 的 大 量 320 像素 设备 ( iPhone 、iPod touch 及 某 些 Android 机 型 )。 


局 [GET Er 上 < 


[EX ooo |; 
首页 关于 联系 


网 页 端 「 应 用 路 转 」 技术 实现 演变 


图 17.4 中 屏 显示 效果 


第 8 步 ， 最 小 宽度 介 于 30em ( 通常 为 480 像素 ) 和 47.9375em ( 通常 为 767 像素 ) 之 间 。 这 适用 于 处 | 


第 7 步 ， 最 小 宽度 为 30em， 通 常 为 480 像素 ， 如 图 17.4 所 示 。 定 位 大 一 些 的 智能 手机 ， 以 及 横向 模式 | 


于 横向 模式 的 智能 手机 、 一 些 特定 尺寸 的 平板 电脑 (如 Galaxy Tab 和 Kindle Fire )， 以 及 比 通 常情 况 更 窄 的 | 


桌面 浏览 器 。 


第 9 步 ， 最 小 宽度 为 48em， 通 常 为 768 像素 。 这 适用 于 常见 宽度 及 更 宽 的 iPad、 其 他 平板 电脑 和 台式 | 


计算 机 的 浏览 器 。 


主导 航 显示 为 一 行 ， 每 个 链接 之 间 由 灰色 的 竖 线 分 隔 。 这 个 样式 会 在 iPhone ( 以 及 很 多 其 他 的 智能 手 | 
机 ) 中 生效 ， 因 为 它们 在 纵向 模式 下 是 320 像素 宽 。 如 果 希 望 报 头 更 矮 一 些 ， 


居 右 。 将 这 种 样式 用 在 下 一 个 媒体 查询 中 ， 代 码 如 下 。 
上 # 基 准 样式 */ 


1 20em (大 于 等 于 320px)*/ 
@media only screen and (min-width: 20em) { 


} 

族 30em (大 于 等 于 480px)*/ 

@media only screen and (min-width: 30em) { 
.masthead { position: relative: } 
.social-sites { 

position: absolute: 
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可 以 让 标识 


居 左 ， 社 交 图 标 


区 7mcs 各 芭 Wit 开发 以 入 门 到 精通 ( 微 课 精 编 版 ) 


Tight: -3px; 


top: 


} 
logo { 


: 41px: 


margin-bottom: 8px; 
text-align: left: 


} 


.nav-main { margin-top: 0: } 


1 
现在 ,样式 


屏幕 更 大 的 智 角 


表 中 有 了 定位 视觉 区 域 至 少 为 30em ( 通常 为 480 像素 ) 的 设备 的 媒体 查询 。 这 样 的 设备 包 
能 手机 ， 以 及 横向 模式 下 的 iPhone。 这 些 样式 会 再 次 调整 报头 。 


第 10 步 ， 在 更 大 的 视觉 区 域 ， 报 头 宽度 会 自动 调 大 。 


/* 30em( 大 


等 于 480px)*/ 


@media only screen and (min-width: 30em) { 
… 报头 样式 .… 
.post-photo { 
float: left; 
margin-bottom: 2px; 
margin-right: 22pX: 
max-width: 61.667%; 


.post-footer { clear: left: } 


2 


| 第 11 步 ， 继 续 在 同一 个 媒体 查询 块 内 添加 样式 ， 让 图 像 向 左 浮动 ， 并 减少 其 max-width， 从 而 让 更 多 
| 的 文字 可 以 浮动 到 其 右 侧 。 文 本 环绕 在 浮动 图 像 周围 的 断 点 可 能 跟 此 处 用 的 不 同 。 这 取决 于 哪些 断 点 适合 
| 内 容 和 设计 。 为 适应 更 宽 的 视觉 区 域 ， 一 般 不 会 创建 超过 48em 的 断 点 。 也 不 一 定 要 严格 按照 设备 视觉 区 域 


让 基准 样式 
/# 20em( 大 于 


| 的 宽度 创建 断 点 。 如 果 一 个 基于 (min-width: 36em ) 的 断 点 非常 适合 的 内 容 ， 就 可 以 大 胆 地 使 用 这 个 断 点 。 


*/ 
上 等 于 320px)*/ 


@media only screen and (min-width: 20em) { 


} 
上 #30em( 大 于 


等 于 480px) */ 


@media only screen and (min-width: 30em) { 


请 30em 一 47 


.9375em( 在 480px~767px) */ 


@media only screen and (min-width: 30em) and (max-width: 47.9375em) { 


.about { 


/* self-clear float */ 


overflow: hidden: 


-about img { 
float: left: 
margin-right: 15px: 
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第 12 步 , 让 “关于 自己 ”图 像 向 左 浮动 。 不 过 ,这 种 样式 仅 当 视觉 区 域 的 宽度 在 30em~47.9375em 时 | 


才 生 效 。 超 过 这 个 宽度 会 让 布局 变 成 两 列 ,“ 关 于 自己 ”文字 会 再 次 出 现在 图 像 的 下 面 。 浮 动 的 “关于 自己 ”| 


图 像 已 显示 为 其 本 来 的 尺寸 ( 270 像素 宽 )， 它 旁边 的 空间 太 小 ， 无 法 很 好 地 容纳 文本 。 这 就 是 之 前 减少 其 | 


max-width 的 原因 。 
入 基准 样式 */ 


六 20em( 大 于 等 于 320px)*/ 


@media only screen and (min-width: 20em) { 


» 
上 #30em( 大 于 等 于 480px)*/ 
@media only screen and (min-width: 30em) { 


} 
让 30em~47.9375em( 在 480px~767px)*/ 


@media only screen and (min-width: 30em) and (max-width: 47.9375em) { 


» 
让 48em( 大 于 等 于 768px)*/ 
@media only screen and (min-width: 48em) { 
.container { 
background: url(../img/bg.png) repeat-y 65.9375% 0: 
padding-bottom: 1.875em:; 


} 
main { 

float: left; 

width: 62.596: /* 600px/960px */ 
} 
.sidebar { 

float: right: 

margin-top: 1.875em: 

width: 31.25%6: /* 300px/960px */ 
’ 


.nav-main { margin-bottom: 0: } 
} 


这 是 最 终 的 媒体 查询 ， 定 位 至 少 有 48em 宽 的 视觉 区 域 ， 如 图 17.5 所 示 。 


该 媒体 查询 对 大 多 数 桌 面 浏 


览 器 来 说 都 为 真 ， 除 非 用 户 让 窗口 变 窄 。 它 同时 也 适用 于 纵向 模式 下 的 iPad 及 其 他 一 些 平板 电脑 。 


在 桌面 浏览 器 中 ( 尽管 要 宽 一 些 ) 也 是 类 似 的。 由 于 宽度 是 用 百分数 定义 的 ， 因 此 主体 内 容 栏 和 附注 


栏 会 自动 伸展 。 


第 13 步 ， 在 发 布 响应 式 页 面 之 前 ， 应 在 移动 设备 和 桌面 浏览 器 上 对 其 测试 一 遍 。 构 建 响应 式 页 面 的 时 
候 ， 用 户 可 以 放大 或 缩小 桌面 浏览 器 的 窗口 ， 模 拟 不 同 手机 和 平板 电脑 的 视觉 区 域 尺寸 。 然 后 再 对 样式 进 


行 相应 的 调整 。 这 当然 是 一 种 不 够 精细 的 办 法 ， 但 它 确实 有 助 了 


优化 网 站 的 时 间 。 


F 建 立 有 效 的 样式 ， 从 而 减少 在 真实 设备 上 


浸 提示 : 第 14 步 ， 对 Retina 及 类 似 显示 屏 使 用 媒体 查询 。 针 对 高 像素 密度 设备 ， 可 以 使 用 下 面 的 媒体 | 


查询 。 


ws 


css 各 克 ap 开发 从 入 门 到 村 通 ( 币 刘 精 信 上 县 ) 
X% 


your-class { 
background-image: url(sprite-2x.png): 


T 
| 
| 
| 
| @media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25). (min-resolution: 120dpi) { 
| 
| 
| background-size: 200px 150px: 

| 


Heero /ABIe 
首页 关于 联系 


网 页 端 [应 用 跳 转 」 技术 实现 演变 


尺寸 创建 的 样式 对 2x 版 本 也 有 效 。 


17.4.5 ”兼容 旧版 IE 


| 

| 对 于 移动 优先 的 方法 ， 有 一 点 需要 注意 ， 就 是 IE8 及 以 下 的 版 本 不 支持 媒体 查询 。 这 意味 着 这 些 浏 
| 览 器 只 会 呈现 媒体 查询 以 外 的 样式 ， 即 基准 样式 。 目 前 ， 使 用 IE6 和 正 7 的 用 户 已 经 非常 少 了 。 因 此 , 真 
| 正 需要 费 脑筋 去 考虑 的 是 IE8， 它 在 全 世界 所 占 的 份额 不 到 9%， 且 这 个 数字 还 在 下 降 ( 详情 参见 http: // 
| gs.statcounter.com )。 

| 对 于 IE8 (及 更 早 的 版 本 )， 有 3 种 解决 方法 。 

| 加 什么 都 不 做 。 让 网 站 显示 基本 的 版 本 。 

| 加 为 它们 单独 创建 一 个 样式 表 ， 让 它们 显示 网 站 最 宽 的 版 本 ( 不 会 形成 响应 式 的 网 页 )。 一 种 做 法 是 
| 复制 一 份 常规 的 样式 表 ， 将 其 命名 为 old-ie.css 之 类 的 文件 名 。 将 媒体 查询 语句 去 掉 ， 但 保留 其 中 
| 
| 


的 样式 规则 。 在 HTML 中 添加 条 件 注释 ， 从 而 让 不 同 的 浏览 器 都 能 找到 正确 的 样式 表 。 

回 如果 希望 页 面 有 响应 式 的 效果 ， 就 在 页 面 中 引入 respondminjs。Scott Jehl 创建 了 这 段 简短 的 代码 ， 
它 让 min-width 和 maxwidth 媒体 查询 对 旧版 下 也 有 效 。 

<!--[fltIE 9]> 
<script src="js/respond.min.js"></script> 


| <![endif]--> 
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| 

设置 好 以 后 ， 正 8 及 以 下 版 本 会 理解 min-width 和 max-width 媒体 查询 ， 并 呈现 相应 的 样式 。 这 样 做 的 | 
话 ， 就 没有 必要 将 正 样式 表 分 离 出 来 了 。 这 个 script 元 素 外 围 的 条 件 注释 是 可 选 的 ， 不 过 如 果 包 含 的 话 ， 
就 只 有 正 8 及 以 下 版 本 会 加 载 rspondminjs， 它 让 IE8 用 户 也 能 看 到 网 站 的 完整 布局 。 | 

可 以 访问 https: //github.com/scottjehl/Respond， 下 载 Respondjs。 下 载 到 计算 机 后 ， 打 开 该 zip 文件 ， 

然后 将 respond.minjs 复制 到 网 站 中 。 | Note 
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看 1 甩 


案例 开发 : 酒店 预订 微 信 wap 网 站 


( 铭 " 视频 讲解 : 16 分 钟 ) 


本 章 将 介绍 一 款 酒店 预订 的 手机 应 用 网 站 ， 网 站 以 Bootstrap 框架 为 技术 基础 ， 页 
面 设 计 风 格 简洁 、 明 亮 ， 功 能 以 “ 微 ” 为 核心 ， 为 浏览 者 提供 一 个 迷你 、 简 单 、 时 尚 的 
设计 风格 ， 与 Bootstrap 框架 风格 完美 融合 ， 非 常 适合 移动 应 用 和 推广 。 


【学 习 重 点 】 

DI 设计 符合 移动 设备 使 用 的 页 面 。 

WI 能 够 根据 Bootstrap 框架 自 定义 样式 。 
I 党 担 扁平 化 设计 风格 的 基本 方法 。 


第 18 章 业 例 开发 酒店 预 条 微 信 Wap 网 站 


by ® a | 
18.1 设计 思路 
视频 讲解 | 
与 上 一 章 示例 相 比 ， 本 章 示例 规模 相对 复杂 一 些 ， 不 过 在 动手 之 前 ， 还 是 先 来 理 清 一 下 设计 思路 , 下 | Note 
面 做 简单 介绍 。 | 


网 站 涉及 的 内 容 可 能 很 多 ， 单 从 网 页 设计 的 角度 看 ， 内 容 主 要 包括 图 片 和 文字 。 本 章 示 例 素材 具体 存 

放 文 件 夹 说 明 如 下 。 

Images: 图 片 等 多 媒体 素材 。 

styles: 样式 表 文 件 。 | 

Scripts: JavaScript 脚本 文件 。 | 

Pictures: 宣传 的 图 片 。 | 

Member: 后 台 支 持 文件 ， 本 章 和 暂 不 介绍 。 | 

help: 帮助 文件 。 | 
| 
| 
| 
| 
| 


| 
18.1.1 内 容 


dialog: jQuery 插件 文件 ， 模 态 对 话 框 插件 。 
calendar: 日 历 插件 。 
本 章 示例 所 需要 的 素材 不 是 很 多 ， 但 是 涉及 的 文件 比较 多 。 


办 办 办 罗 办 办 罗 


18.1.2 ”结构 


本 章 示例 主要 包含 下 面 几 个 文件 ， 简 单 说 明 如 下 。 
index.html: 首页 。 | 
Activitys.html: 最 新 活动 页 面 。 | 
CityList.html: 城市 列表 页 面 。 | 
Giftaspx html: 礼品 页 模板 ， 供 后 台 人 参考 使 用 。 | 
GiftList.html: 礼品 商城 。 | 
Hotelaspx html: 预订 酒店 ， 选 择 房型 模板 ， 供 后 台 参 考 使 用 。 | 
Hotel.aspxcheckInDate.html: 房型 和 日 期 选择 页 面 。 | 
HotelInfo.aspx.html: 酒店 信息 介绍 模板 ， 供 后 台 参 考 使 用 。 | 
HotelList.aspxcheckInDate.html: 所 选 城市 的 相关 酒店 信息 列表 页 面 。 
HotelReview.aspx.html: 用 户 评价 页 面 。 | 
login.html: 用 户 登录 页 面 。 | 
News.aspx.html: 酒店 新 闻 页 面 。 | 

结构 不 仅仅 包含 文件 ， 更 多 涉及 页 面 内 容 ， 根 据 内 容 搭建 页 面 结构 ， 在 下 面 各 节 中 会 逐一 介绍 每 个 页 | 

面 的 结构 框架 。 


浊 因 罗 因 因 因 办 办 办 办 罗 民 


al 
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18.1.3 效果 


| 
A | 下 面 我 们 使 用 Opera Mobile Emulator 来 预览 一 下 网 站 整体 效果 ， 以 使 在 分 页 设计 时 有 一 个 整体 把 握 。 
| 首先 ， 打开 index.html 页 面 ， 显 示 效 果 如 图 18.1 所 示 。 
ET 首页 以 扁平 化 进行 设计 ,包含 6 个 导航 图 标 色 块 ， 点 击 第 一 个 图 标 色 块 “预订 酒店 "， 进 入 选择 城市 页 
| 面 ， 在 该 页 面 选择 要 入 住 的 酒店 ， 页 面 效果 如 图 18.2 所 示 。 


盟 六 皇 %“ 市 : 桂林 


© A&Bm: 2017-0411 


© Rem: 2017-0412 


立即 登录 | 免费 注册 | 电脑 版 


酒店 预订 | 我 的 订单 | 我 的 格子 格子 敬酒 店 连 钢 只 把 权 所 有 2012-2017 
图 18.1 首页 页 面 设计 效果 图 18.2 选择 要 入 住 的 酒店 效果 
在 首页 点 击 “ 最 新 活动 ”选项 ， 进 入 最 新 活动 页 面 ， 在 该 页 面 显 示 酒 店 促销 活动 的 相关 信息 ， 如 
| 图 18.3 所 示 。 
| 在 首页 点 击 “我 的 订单 ”选项 ， 可 以 查看 个 人 订单 信息 ， 如 果 没 有 登录 ， 则 显示 登录 表单 ， 如 图 18.4 
| 所 示 。 


各 登录 


主页 返回 


活 输 入 手机 号 /身份 证 /会 员 卡 号 
炭 认 宰 码 为 证 件 号 后 4 位 
口 记 驻 账号 忘记 密码 ? 


还 没 账号 ? 立即 免费 注册 


或 者 使 用 合作 账号 一 键 登录 : 
四 g 


立即 登录 | 免费 注册 | 电脑 版 
格子 委 酒 店 连锁 号 拨 权 所 有 2012-2017 


图 18.3 最 新 活动 页 面 效 果 图 18.4 查看 我 的 订单 页 面 
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在 首页 点 击 “ 我 的 格子 ”选项 ， 进 入 个 人 信息 中 心 页 面 ， 如 果 没 有 登录 ， 则 显示 登录 表单 。 在 首页 点 | 
击 “礼品 商城 ”选项 ， 进 入 商城 页 面 ， 如 图 18.5 所 示 。 
在 首页 点 击 “ 帮 助 咨询 ”选项 ， 将 进入 帮助 中 心 页 面 ， 咨 询 相关 帮助 信息 ， 如 图 18.6 所 示 。 


盘 礼品 商城 册 币 。 开 助 咨询 六 
gary 2 全 | 
» MO0: SNe | 
| rm? | 
萨摩 充电 宝 要 海 塞 尔 耳塞 MX80 © | 
9600 积分 7600 积分 | 

6800» 5000» 日 一 | 
介 | Om | 
EP 6 一 | 

图 18.5 礼品 商城 页 面 效果 图 18.6 ”帮助 咨询 页 面 


18.2 设计 首页 


首页 是 一 个 简单 的 导航 列表 ,设计 步 又 如 下 
第 1 步 ,打开 index.html 文件 ， 首 先 在 头 部 区 域 导 入 框架 文件 | 
<!DOCTYPE html> | 
<html> | 
<head> | 
<meta charset="utf-8"> | 
<meta name="viewport" content="width=device-width. initial-scale=1.0. maximum-scale=1.0, user-scalable=0; "> | 
<meta content="yes" name="apple-mobile-web-app-capable"> | 
<link href="styles/bootstrap.min.css" rel="stylesheet"> | 
<link hre 人 ="styles/bootstrap-responsive.css" rel="stylesheet"> | 
<link hre 人 ="styles/NewGlobal.css" rel="stylesheet"> | 
‘<script src="Scripts/jquery-1.7.2.min.js"></script> | 
<Script src="Scripts/bootstrap.min.js"></script> | 
</head> | 
<body> 
</body> | 
</html> | 
| 


yo 


第 2 步 , 设计 导航 列表 结构 ,使 用 <div class="container"> 布局 容器 包含 ， 其 包含 如 下 两 部 分 。 


<div class="container"> | 
<div class="header"> <img strc="Images/logo.png" style="height: 40px: margin: 10px Opx Opx 15px"> </div> | 
<div style="padding: 0 Spx 0 0: "> | 
</div> | 
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2 is 和 zu 开发 从 和 到 本 和 ( 微 裸 精 编 版 ) 


第 一 部 分 为 标题 栏 ， 显 示 网 站 Logo， 本 例 以 一 张大 图 代 蔡 显示 ， 效 果 如 图 18.7 所 示 。 


D| GRIDINN 
格子 ' 微 酒店 
图 18.7 设计 首页 标题 栏 效果 


大 图 为 PNG 格式， 上 面 为 钱 空 白色 文字 ， 下 面 使 用 CSS 设计 标题 栏 背 景色 为 绿色 。 
.header { 

background: #6ac134: 

height: 60px: 

position: relative; 

width: 100%; 


} 
第 3 步 ， 第 二 部 分 为 导航 列表 结构 ， 使 用 3 个 <ul class="unstyled defaultlist pt20"> 标签 堆 秋 显示 ， 每 个 


| 列表 框 包含 两 个 列表 项 目 ， 并 水 平 布局 ， 效 果 如 图 18.8 所 示 。 


图 18.8 设计 首页 导航 图 标 效果 


<div style="padding: 0 Spx 0 0: "> 
<ul class="unstyled defaultlist pt20"> 
<li class="f"> <a href="CityList.html"> 
<h3> 预订 酒店 </h3> 
<figure class="jp_icon"></figure> 
</a> < 人 > 
<li class="h"> <a hre 全 "Activitys.html"> 
<h3> 最 新 活动 </h3> 
<figure class="jd_icon"></figure> 
</a> </l> 
</ul> 
<ul class="unstyled defaultlist">…… </ul> 
<ul class="unstyled defaultlist">……- </ul> 
</div> 


每 个 导航 图 标 使 用 <a> 标签 包 庄 ,里 面包 含 文字 和 字体 图 标 ,然后 在 <li> 列表 项 目 上 面 定 义 不 同 的 皮 
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肤 颜色 ，<li> 标签 浮动 显示 ， 实 现 一 行 两 列 的 排版 布局 。 
第 4 步 ， 在 页 面 底部 插入 <div class="footer"> 包含 框 ， 定 义 网 站 版 权 信息 区 域 ,结构 如 下 ， 效 果 如 
图 18.9 所 示 。 | 
| y 
<div class="footer"> | 
<div class=”gezifooter”> <a href=”#" class=”ui-link” > 酒 店 预 订 </a> <font color="#878787">|</font> | Note 
<a href=”#"”class=”ui-link” > 我 的 订单 </a> <font color="#878787">|</font> <a href=”#" class=”ui- 
link”> 我 的 格子 </a> </div> 
<div class="gezifooter"> 


| 
<p style="color: #bb; "> 格子 微 酒店 连锁 &copy; 版 权 所 有 2012-2017</p> | 
| 
| 
| 


</div> 
</div> 


酒店 预订 | 我 的 订单 | 我 的 格子 
格子 微 酒店 连锁 @ 版 权 所 有 2012-2017 


图 18.9 设计 页 脚 信 息 显 示 效 果 


18.3 ”设计 登录 页 


打开 login.html 页 面 ， 该 页 面包 含 3 部 分 ， 顶 部 为 标题 栏 ， 底 部 为 脚注 栏 ， 中 间 部 分 是 登录 表单 结构 。 
标题 栏 采用 标准 的 移动 设备 布局 样式 ， 左 右 为 导航 图 标 ， 中 间 为 标题 文字 ， 效 果 如 图 18.10 所 示 。 


图 18.10 标题 栏 设计 效果 


| 
| 
<div class="header"> <a href="index.html" class="home"> <span class=” header-icon header-icon-home"></span> | 
<span class="header-name"> 主页 </span> </a> | 
<div class="title" id="titleString"> 登录 </div> | 
<a href="javascript: history.go(-1): " class="back"> <span class="header-icon header-icon-return"></span> <span | 
class="header-name"> 返回 </span> </a> | 
/div> | 
标题 栏 图 标 以 文字 图 标 形式 设计 ， 这 样 方便 与 文字 定义 相同 的 颜色 ， 为 <div class="header"> 设计 绿色 | 
背景 ， 营 造 一 种 扁平 的 设计 风格 。 | 
中 间 位 置 显 示 表 单 结构 ， 代 码 如 下 。 


| 
| 
| 
| 
<div class="container width80 pt20"> | 
| 
b 
| 
| 
| 
| 


<form name="aspnetForm" method="post" action="login.aspx?ReturnUrl=%2fMember%2fDefault.aspx" | 
id="aspnetForm" class="form-horizontal"> | 
<div> 
<input type="hidden" name=" EVENTTARGET" id=" EVENTTARGET" value=""> 
<input type="hidden" name=" EVENTARGUMENT" id=" EVENTARGUMENT" value=""> 
<input type="hidden" name=" VIEWSTATE" id=" VIEWSTATE" value="1"> | 
</div> | 
<div> | 
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| 尽心 


| <input type="hidden" name=" EVENTVALIDATION" id=" EVENTVALIDATION" 
| value=ywEWBQLZmqilDgLJ4f4BwL90KKTCAKqkJ77CQKIHImBdPJophKZ3je4aKMIEKXLH+P8oASc"> 
</div> 
<div class="control-group"> 
<input name="ctl00$ContentPlaceHolderl $txtUserName" type="text" id="ctl00 ContentPlaceHolderl 
txtUserName" class="input width100" style="background: none repeat scroll 0 0 #F9F9F9: padding: 


8px 0px 8px 4px" placeholder=" 请 输入 手机 号 / 身份 证 /会 员 卡 号 "> 


</div> 
<div class="control-group"> 
<input name="ctl00$ContentPlaceHolderl $txtPassword" type="password" id="ctl00_ 
ContentPlaceHolderl txtPassword" class="width100 input" style="background: none repeat scroll 0 
0 #9F9F9: padding: 8px 0px 8px 4px" placeholder=" 默认 密码 为 证 件 号 后 4 位 "> 
</div> 
<div class="control-group"> 
<label class="checkbox 人 "> 
| <input name="ctl00$ContentPlaceHolderl1$cbSaveCookie" type="checkbox" id="ctl00 
| ContentPlaceHolderl cbSaveCookie" style="float: none: margin-left: Opx: "> 
| 记 住 账号 </label> 
| <a class="fr" href="GetPassword.aspx"> 忘记 密码 ? </a> </div> 
| <div class="control-group"> <span class="red"></span> </div> 
| <div class="control-group"> 
| <button onclick="__doPostBack('ctl00$ContentPlaceHolderl$btnOK', ")" id="ctl00_ 
| ContentPlaceHolderl_btnOK" class="btn-large green button width100"> 立即 登录 </button> 
| </div> 
| <div class="control-group"> 还 没 账号 ? <a href="Reg.aspx@ReturnUrl= 252fMember 252fDefault.aspx" id= 
| "ctl00_ContentPlaceHolderl RegBtm"> 立即 免费 注册 </a> </div> 
<div class="control-group"> 或 者 使 用 合作 账号 一 键 登录 : <br> 
<a class="servIco ico_qq" href="qlogin.aspx"></a> <a class="servIco ico_sina" href="default.htm"></a> </div> 
</form> 
</div> 


在 表单 中 通过 <input type="hidden"> 隐藏 控件 负责 传递 用 户 附 加 信息 ， 借 助 Bootstrap 表单 控件 美化 效 


味 认 密码 为 证 件 号 后 4 位 | 


| 
| 
| 
| 
| 
| 
| 
| 
| 口 记 住 账号 忘记 密码 9 
| 
| 
| 
| 
| 还 没 冉 号 ? 立即 免费 注册 
| 


| 或 者 使 用 合作 账号 一 键 登录 : 
四 @ 


| 图 18.11 登录 表单 设计 效果 
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18.4 选择 城市 


打开 CityListhtml 页 面 ， 该 页 面 提供 了 一 个 交互 界面 ， 供 用 户 选 择 要 入 住 的 酒店 所 在 的 城市 。 
该 页 面 标题 栏 和 脚注 栏 与 其 他 页 面 设计 相同 ， 在 此 就 不 再 重复 ， 下 面 主要 看 一 下 交互 表单 界面 。 设计 | 

的 表单 结构 如 下 。 
<div class="container width90 pt20"> | 
<form class="form-horizontal" action="HotelList.aspx" method="get" id="form1"> | 


<ul class="search-group unstyled"> 
<li> 


<div class="coupon-nav coupon-nav-style"> <span class="search-icon location-icon"></span> <span ， 
class="coupon-label"> 选择 城市 : </span> <span class="coupon-input"> <span style="font-size: 

16px; line-height: 35px; " id="cityname"> 全 部 城市 </span></span> </div> | 

<div class="citybox"> <span cityid="0"> 全 部 </span> <span cityid="771"> 南 宁 </span> <span 
cityid="773"> 桂林 </span> <span cityid="371"> 郑州 </span> </div> | 

</> | 
<li> | 


<div class="coupon-nav coupon-nav-style"> <span class="search-icon time-icon"></span> <span | 
class="coupon-label"> 入 住 日 期 : </span> <span class="coupon-input"'><a id="datestart" class="datebox" 
href="javascript: void(0)"><span class="ui-icon-down"></span></a></span> </div> | 


<div id="dp_start" class="none"> | 
<div id="datepicker_start"></div> | 

</div> | 
</i> | 
<li> | 


<div class="coupon-nav coupon-nav-style"> <span class="search-icon time-icon"></span> <span | 
class="coupon-label"> 离 店 日 期 : </span> <span class="coupon-input"><a id="dateend" class=" 

datebox" hre 个 "javascript: void(0)"><span class="ui-icon-down"></span></a></span> </div> | 

<div id="dp_end" class="none"> | 

<div id="datepicker_end"></div> | 

</div> | 

<Nli> | 
</ul> | 
<input id="checkInDate" name="checkInDate" value="2017-04-11" type="hidden"> | 
<input id="checkOutDate" name="checkOutDate" value="2017-04-12" type="hidden"> | 
<input id="cityID" name="cityID" value="0" type="hidden"> | 
<div class="control-group tc"> | 
<button class="btn-large green button width80" style="padding-left: 0px: padding-right: Opx; " | 
ID="bmOK'" > | 

<a href="HotelList.aspxcheckInDate.html"> 立即 查找 </a> | 

</button> | 

</div> | 

<div class="control-group tc"> <a href="NearHotel.aspx" style="padding-left: Opx: padding-right: Opx: " | 
class="btn-large green button width80"> 附近 酒店 </a> </div> | 

</form> | 
</div> | 
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Note 


gm Hpis 各 2 开 友人 和 站 到 本 通 ( 蕉 训 桂山) 


为 了 方便 Javascript 脚本 控制 ， 整 个 页 面 没 有 使 用 传统 的 表单 控件 来 设计 ， 而 是 通过 JavaScripttCSS 来 
| 设计 ， 界 面 效果 如 图 18.12 所 示 。 
轩 过 Si: 全 部 城市 
© NEEM 2017-04-11 
© aaBm， 二 
| Dm 
| 
| 


图 18.12 ”查找 酒店 界面 
点 击 “ 选 择 城市 ”选项 ， 将 会 滑 出 城市 列表 面板 ， 如 图 18.13 所 示 ， 用 户 可 以 选择 目标 城市 。 


围 进 泽 起 市 ， 全 部 城市 
全 部 南宁 桂林 
郑州 
图 18.13 ”选择 城市 
| 在 城市 列表 面板 中 选择 一 个 城市 ， 然 后 在 下 面 的 选项 中 选择 人 住 日 期 ,效果 如 图 18.14 所 示 。 
转 坟 s: 郑州 
| © 和 EE: 2017-04-11 


<< 2017 年 04 月 >> 


1 医 国 13 14 15 16 
cr | 


© 高 店 日 期 : 2017-04-12 
图 18.14 选择 日 期 
用 户 选择 的 日 期 通过 JavaScript 显示 在 界面 中 ， 同 时 赋值 给 隐藏 控件 ， 以 便 传递 给 服务 器 进行 处 理 。 
交互 控制 的 JavaScript 代码 如 下 。 
<script type="text/javascript"> 
(function ($. undefined) { 
S$(function () {//dom ready 
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Var open = null, today = new Date0: 
Var beginday ='2017-04-11': 
Var endday = "2017-04-12'; 
/设置 开始 时 间 为 今天 
S$(‘#datestart').html(beginday + '<span class="ui-icon-down"></span>"): 
/1 设置 结束 时 间 
S$(‘#dateend').html(endday + 
‘<span class="ui-icon-down"></span>"): 
$(#datepicker_start").calendar({// 初始 化 开始 时 间 的 datepicker 
date: $('#datestart').text0. // 设置 初始 日 期 为 文本 内 容 
/设置 最 小 日 期 为 当月 第 一 天 ， 既 上 一 月 的 不 能 选 
minDate: new Date(today.getFullYear0. today.getMonth(), today.getDateO). 
4 设置 最 大 日 期 为 结束 日 期 ， 结 束 日 期 以 后 的 天 不 能 选 
maxDate: new Date(today.getFullYear0. today.getMonth(), today.getDate() + 25), 
select: function (e, date, dateStr) {// 当选 中 某 个 日 期 时 
Var dayl = new Date(date.getFullYear(). date.getMonth(), date.getDateO + 1); 
// 将 结束 时 间 的 datepick 的 最 小 日 期 设 成 所 选 日 期 
S$(#datepicker end').calendar('minDate', dayl).calendar(refresh ): 
S$('#dp_start').toggle(): 
// 把 所 选 日 期 赋值 给 文本 
S$(#datestart'").html(dateStr + '<span class="ui-icon-down"></span>").removeClass('ui-state-active'); 
S$(‘#checkInDate').val(dateStr): 
S$('#dateend').html($.calendar.formatDate(day1) + '<span class="ui-icon-down"></span>"). 
removeClass('ui-state-active'): 
S$('#checkOutDate').val($.calendar.formatDate(day1)); 


} 

D); 

S$('#datepicker_end').calendar({ /初始 化 结束 时 间 的 datepicker | 
date: $('#dateend').text(). /设置 初始 日 期 为 文本 内 容 | 
minDate: new Date(today.getFullYear(). today.get Month(). today.getDate() + 1). | 
maxDate: new Date(today.getFullYear(, today.getMonth(), today.getDate() + 16). | 
select function (e, date, dateStr) { / 当选 中 某 个 日 期 时 | 

// 收 起 datepicker | 
open = null: | 
S$(#dp_end').toggle(): | 
/ 把 所 选 日 期 赋值 给 文本 | 
S$(#dateend').html(dateStr + '<span class="ui-icon-down"></span>').removeClass('ui-state-active); 
S$(#checkOutDate').val(dateStr): | 
} | 

和 

S$(#datestart’).click(function (e) { // 展开 或 收 起 日 其 | 
S$(‘#datestart’).removeClass('ui-state-active'): | 
vartype= Stthis).addClass(ui-state-activVe').js(#datestart) ? 'start: 'end': | 
$(#dp_start)-toggleO: | 

)-highlight(ui-state-hover'): | 

S$(#cityname").click(function (e) { | 
S$('.citybox').toggle(): | 

D: 

S$('.citybox span').click(function (e) { 
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S$(#cityname').text($(this).textO): 
S$('.citybox').toggle(); 
S$(#cityID").val($(this).attr("cityId")): 
D: 
S$(#dateend').click(function (e) { // 展开 或 收 起 日 期 
S$(#dateend').removeClass('ui-state-active'): 
var type = $(this).addClass('ui-state-active').is('#dateend') ? 'start: 'end'; 
S$(#dp_end').toggle():; 
}).highlight('‘ui-state-hover’): 


18.5 选择 酒店 


| 当 用 户 在 选择 城市 页 面 提交 表单 之 后 ， 将 会 跳 转 到 HotelList.aspx 页 面 ， 该 页 面 为 后 台 服 务 器 处 理 文件 ， 
| 该 文件 将 动态 显示 所 在 城市 相关 酒店 信息 列表 ， 本 例 模拟 效果 如 图 18.15 所 示 ( HotelList.aspxcheckInDate. 
| html ), 


酒店 列表 2 


返回 


JE ws 南宁 秀 灵 店 
地 址 : 般 灵 路 55 号 ( 出 入 境 管 
理 局 旁 ) 
评分 :4.6 (1200 人 已 评 》 


多 巴林 Be [2 


南宁 明秀 店 
一 地 址 ; 南宁 明秀 西 路 18-8 号 
《南宁 第 八 中 学 旁 ) 
评分 ; 5.0 (267 人 已 评 ) 
编 机 J 及 [> 


南宁 金 湖广 场 店 
地址 : 南宁 市 金 湖广 场 金 泪 一 
支 路 中 国 邮政 务 
评分 : 4.6 (276 人 已 评 ) 


图 18.15 ”所 选 城市 的 酒店 列表 


页 面 基本 结构 如 下 。 


<div class="container hotellistbg"> 
<ul class="unstyled hotellist"> 
<li> <a href="Hotel.aspxcheckInDate.html"> <img class="hotelimg fl" src="Pictures/1/5.jpg"> 
<div class="inline"> 
| <h3> 南宁 秀 灵 店 <h3> 
| <p> 地 址 : 秀 灵 路 55 号 ( 出 入 境 管理 局 旁 )</p> 
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</div> 
<div class="clear"></div> 
</a> 
<ul class="unstyled"> 
<li><a href="Hotel.aspx(@id=5" class="order"> 预订 </a></li> 
<li><a href="Hotelmap.aspx(@id=5" class="gps"> 导航 </a></li> 
<li><a href="Hotelinfo.aspx(@id=5" class="reality"> 实景 </a></li> 
</ul> 


T 
| 
<p> 评分 : 4.6 (1200 人 已 评 )</p> | 
| 
| 


在 该 页 面 中 可 以 选择 特定 的 酒店 ， 并 根据 每 个 酒店 底部 的 3 个 导航 按钮 预订 酒店 ， 查 看 酒店 信息 , 或 | 
者 进行 导航 。 | 


18.6 预订 酒店 


前 4 


主页 返回 


房型 简介 地 图 评论 
肯 秀 妈 路 55 号 (出 入 境 管 理 局 旁 ) 


和 o4 月 11 日 - 04 月 12 日 


上 下 铺 EE | 


¥124 起 


荔 
兽 
: 


图 18.16 选择 房型 
页 面 基本 结构 如 下 。 


<div class="container"> 
<ul class="unstyled hotel-bar"> 
<li class="first"> <a href—"#BookRoom" class="active"> 房型 </a> </li> 
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<li><a hre 全 "HotelInfo.aspx.html"> 简介 </a></li> 
<li><a hre 伍 "#"> 地 图 </a></li> 
<li><a href="Hotelreview.aspx.html"> 评论 </a></li> 
</nl> 
<div id="BookRoom" class="tab-pane active fade in"> 
<div class="detail-address-bar"> <img alt="" src="images/location icon.png"> 
<p> 秀 灵 路 55 号 ( 出 人 境 管理 局 旁 )</p> 
</div> 
<div id="datetab" class="detail-time-bar"> <img alt="" src="images/calendar.png"> 
<p>04 月 11 日 -04 月 12 日 <p> 
<span class="icon-down"></span> </div> 
<form action="hotel.aspx" method="get"> 
<div id="datebox" class="section none"> 
<div class="filter clearfix"> 
<p style="margin-bottom: 10px: display: block: "> 入 住 : <a id="datestart" href="javascript: 
void(0)"><span class="ui-icon-down"></span></a></p> 
<br> 
<p> 离开 : <a id="dateend" hre 人 "javascript: void(0)"><span class="ui-icon-down"></span></a></p> 
</div> 
<div id="datepicker wrap"> 
<div id="dp_start"> 
<p> 入 住 时 间 : </p> 
<div id="datepicker start"></div> 
</div> 
<div id="dp_end"> 
<p> 离开 时 间 : </p> 
<div id="datepicker_ end"></div> 
</div> 
</div> 
<div class="result"> 
<input type="submit" class="btn" value=" 确定 修改 "> 
<span class="btn" id="datecancel"> 取消 </span> </div> 
<input id="id" name="id" type="hidden" value="5"> 


<input CheckInDate" name="CheckInDate" type="hidden" value="2017-4-11"> 
<input id="CheckOutDate" name="CheckOutDate" type="hidden" value="2017-4-12"> 
</div> 
</form> 
<ul class="unstyled roomlist"> 
<li> 
<div class="roomtitle"> 
<div class="roomname"> 上 下 铺 </div> 
<div class="fr"> <em class="orange roomprice"> “三 134 起 </em> <a href='login. 
aspx@page=_2Forderhotel.aspx&hotelid=5&roomtype=5&checkInDate=2017-4- 
11&checkOutDate=2017-4-12' title=' 立即 预订 ' class=btn btn-success 过 ame> 预订 </a> </div> 
</div> 
<a class="f] roompic" bigsrc="Pictures/20130411152105m.jpe"> <img title=" 秀 灵 上 下 铺 " 
src="Pictures/20130411152105s.jpe"></a> </li> 
</nl> 
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wm 


<div style="transform-origin: Opx Opx Opx: opacity: 1: transform: scale(1, 1): " class="hotel-prompt"> <span ， 
class="hotel-prompt-title" id="digxx"> 特别 提示 </span> | 
<p> 最 早 和 人 住 时 间 为 中 午 12: 00. 如 需 提前 入 住 请 联系 客服 。</p> 
</div> 


</div> | 贸 


</div> 


在 该 页 面 顶部 显示 一 行 次 级 导航 面板 ， 分 别 为 房型 、 
打开 HotelInfo.aspx 页 面 ， 该 页 面 将 会 动态 显示 对 应 酒店 


简介 、 地 图 和 评价 。 当 点 击 “ 简 介 ” 选 项 ， 将 会 | 
详细 介绍 。 本 例 模板 页 面 效果 如 图 18.17 所 示 。 


酒店 简介 


图 18.17 查看 酒店 信息 


该 页 面 结 构 如 下 ( HotelInfo.aspx.html ) 


<div class="container"> 
<ul class="unstyled hotel-bar"> | 
<li class="first"> <a href="Hotel.aspx.html"> 房型 </a> </li> | 
<li><a hre 全 "Hotelinfo.aspx" class="active"> 简介 </a></li> | 
<li><a hre 伍 "#"> 地 图 </a></li> 

<li><a hre 人 "HotelReview.aspx.HTML"> 评论 </a></li> | 
</ul> | 
<div class="hotel-prompt "> <span class="hotel-prompt-title"> 酒店 图 片 </span> 
<div id="slider" style="margin-top: 10pX: "> | 
<div> <img src="Pictures/20121231113309m.jpg"> 
<p> 酒店 外 观 </p> | 
</div> | 
<div> <img src="Pictures/20121231113406m.jpe"> 
<p> 大 堂 </p> | 

</div> 
<div> <img src="Pictures/20121231113520m.jpe"> 
<p> 阳光 大 床 房 </p> | 


</div> | 


“4935 


eic 和 和 uk 开 去 信和 站 到 精通 ( 蕉 课 靖 病 及) 


</div> 
<div id="hotelinfo" class="hotel-prompt "> 
<span class="hotel-prompt-title"> 酒店 简介 </span> 
<p> 格子 微 酒店 南 守 南宁 秀 灵 路 店 位 于 广西 最 著名 的 大 学 广西 大 学 东 门 旁 ， 紧 邻 耸 江 边 ， 周 边 超 市 、 餐 饮 、 
银行 等 配套 设施 完善 ， 出 行 便利 。 酒 店 倡导 低 碳 环保 ， 客 房 内 配 有 24 小 时 热 水 、wif 网 络 、 电 视 等 设施 ， 
客房 虽 小 ， 设 施 齐全 。 酒 店 服务 周到 细致 ， 是 您 出 行 的 不 错 选择 。 酒 店 开业 时 间 2012 年 12 月 。</p> 
<p> 地 址 : 秀 灵 路 55 号 ( 出 人 境 管理 局 旁 )</p> 
<p> 电话 : 0771-3391588</p> 
</div> 


如 果 在 页 面 顶部 点 击 “ 评 论 ” 选 项 ， 可 以 打开 评论 页 面 HotelReview.aspx， 了 解 网 友 对 该 酒店 的 评价 信 


息 列表 ， 效 果 如 图 18.18 所 示 。 


[co 


这 次 去 这 个 房间 有 点 烟 际 ， 住 
了 这 么 多 次 只 有 这 个 有 烟 味 ~ 
除了 烟 味 禾 是 一 如 既往 的 好 ! 


2017.0414 


园 ="** 


好 - 


2017.0410 


图 := 
一 如 上 入 的 不 铺 - 
图 18.18 查看 用 户 评价 信息 
打开 本 例 HotelReview.aspx.html 模板 页 面 ， 该 页 面 的 基本 结构 如 下 。 


<div class="container"> 
<ul class="unstyled hotel-bar"> 
<li class="first"> <a href="Hotel.aspx.HTML"> 房型 </a> </li> 
<li><a hre 人 "HotelInfo.aspx.html"> 简介 </a></li> 
<li><a hre 伍 "#"> 地 图 </a></li> 
<li><a href="HotelReview.aspx.html" class="active"> 评论 </a></li> 
</ul> 
<div class="hotel-comment-list"> 
<div class="hotel-user-comment"> <span class="hotel-user"><img width="32" height="32" src="Pictures/2/ 
User01.png"> 会 员 李 * 清 : </span> 
<div class="hotel-user-comment-cotent"> 
<p> 这 次 去 这 个 房间 有 点 烟 味 ， 住 了 这 么 多 次 只 有 这 个 有 烟 味 ~ 除了 烟 味 都 是 一 如 既往 的 好 ! <p> 
<span>2017-04-11</span> </div> 
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</div> 


</div> 


i 
| 
| 
| 
| 
| 
| 
| 
<Jdiv> | 
' 
| 


上 面 重点 介绍 了 酒店 预订 的 完整 流程 ， 从 选择 城市 ， 到 选择 酒店 再 到 选择 房型 ， 查 看 酒店 信息 和 用 中 gy 
户 评论 等 ， 本 章 示例 网 站 还 包含 其 他 辅助 页 面 ， 这 些 页 面 设计 风格 相近 ， 结 构 大 致 相同 ， 这 里 就 不 再 详细 ， 
讲解。 
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发 布 网 页 


jQuery Mobile 应 用 项 目的 发 布 方法 有 两 种 : 一 种 是 利用 第 三 方 工具 进行 打包 ， 然 
后 发 布 到 相应 的 应 用 商店 ; 另 一 种 是 直接 以 Web 的 形式 进行 发 布 。 本 章 采 用 Cordova 和 
Ant 将 网 页 封装 成 Android APP，Cordova 是 免费 的 、 开 放 源 代码 的 移动 开发 框架 ， 下 面 
将 介绍 如 何 刊 用 Cordova 将 写 好 的 网 页 程序 封装 成 Android APP。 


【学 习 重 点 】 
PI 将 HTML 页 面 打包 成 多 平台 应 用 的 方法 。 
PI 了 解 Cordova 用 法 。 
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19.1 Web 应 用 发 布 基础 | 
A 


不 同 的 平台 需要 创建 不 同 的 软件 包 ， 因 此 用 户 需 要 把 所 有 的 文件 ， 如 HTML、JavaScript、CSS 和 
jQuery Mobile 框架 的 文件 ， 复 制 到 不 同 的 项 目 中 ， 然 后 创建 不 同 的 软件 包 。 

把 Web 应 用 当 作 原生 应 用 来 打包 ， 应 用 可 以 调用 到 一 一 些 非 HTML5 的 API， 这 些 API 包 括 相机 、 联 系 | 
人 列表 、 加 速度 传感器 API， 要 打包 应 用 到 商店 发 布 ， 可 以 选择 下 列 方式 。 

回 为 每 个 平台 创建 一 个 原生 应 用 项 目 ， 人 用 wa vv | 

组 件 绑 定 应 用 的 HIML 内 容 。 这 种 方式 有 时 被 叫 作 混合 
回 ”使 用 某 个 官方 的 Web 应 用 平台 RE AR 
回 使 用 原生 应 用 编译 工具 ， 帮 助 为 各 个 平台 编译 相应 的 软件 包 。 


< 注意 : 把 Web 应 用 编译 成 原生 软件 包 往 往 需要 掌握 各 平台 原生 应 用 代码 和 SDK 工具 的 专业 知识 。 


打包 应 用 的 第 一 步 是 明确 应 用 要 针对 什么 平台 在 哪个 应 用 商店 进行 发 布 。 如 表 19.1 所 示 列 举 了 可 以 用 | 
来 发 布 应 用 的 商店 ， 用 户 应 该 在 各 个 平台 上 创建 一 个 应 用 发 布 账号 


表 19.1 可 以 发 布 应 用 的 商店 列表 


商 店 所 有 者 发 布 费 用 URL 
iOS ( iPhone、 让 cd、| ; 等 全 -| http : //developer.apple. 
AppSt Appl 每 年 99 美元 
iPad ) WR com/ programs/ios 
-| http: //market.android.com/ 
Android Market “| Google Android -次 20 美元 ttp: /market.android.co 


publish 


http : //appworld.blackberry. 
有 有 
AppWorld RIM BlackBerry | Smartphones/PlayBook | cod/bar 免费 i 


http: //info.publish.nokia. 


Nokia Store Nokia Symbian/N9 wgz/deb bar | 1 欧元 co 


http: //developer.amazon. 


Amazon AppStore | Amazon Android/Kindle Fire apk 每 年 99 美元 ci 


MarketPlace Microsoft Windows Phone 每 年 99 美元 | http: //create.msdn.com/ 


针对 每 个 平台 ， 可 以 根据 各 自 的 参考 文档 检查 应 用 商店 要 求 提供 哪些 元 数据 ， 例 如 : 
高 分 辩 率 的 图 标 ( 通常 都 是 512 像素 x 512 像素 )。 

回 应 用 描述 。 

所 属 分 类 的 选择 。 

每 个 平台 上 的 应 用 截图 。 

发 布 兼容 设备 列表 。 

发 布 国家 和 语言 。 

市 场 营销 口号 。 


加 


网 轿 罗 加 加 


Mors 
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19.2 ” 下载、 安装 Cordova 


Cordova 的 前 身 是 PhoneGap ，PhoneGap 核心 捐 给 了 Apache 基金 会 ， 改 名 为 Apache Cordova。 下 面 将 
| 介绍 以 Cordova 创建 Android APP 的 方法 。 
| Cordova 提供 将 HTML5+JavaScript+CSS3 开发 的 程序 代码 包装 成 跨 平台 的 APP，Cordova 包含 许多 
| 移动 设备 的 API 接口 ， 通 过 调用 这 些 API， 就 能 够 让 HTML5 制作 出 来 的 Mobile APP 也 像 原生 应 用 程序 
| (Native APP ) 一 样 具有 使 用 相机 、 扫 描 / 浏 览 影 片 或 者 听 音 乐 等 功能 。 
| Cordova 有 多 种 安装 方式 ， 笔 者 使 用 的 是 Apache Cordova 官网 提供 的 NPM ( Node Package Manage ) 安 
| 装 方式 ， 使 用 NodeJS 的 NPM 套件 通过 Command-Line Interface ( CLI， 命 令 行 接口 ) 输入 安装 命令 。 下 面 
| 介绍 安装 的 必要 工具 以 及 安装 方法 。 

19.2.1 安装 Java JDK 

| 

| Java JDK 是 Java 语言 的 软件 开发 工具 包 ， 主 要 用 于 移动 设备 、 谍 入 式 设备 上 的 Java 应 用 程序 。JDK 是 
| 整个 Java 开发 的 核心 ， 它 包含 了 Java 的 运行 环境 (JVM+Java 系统 类 库 ) 和 Java 工具 。 

| 第 1 步 ，Java JDK 下 载 地 址 为 http: //www.oracle.com/technetwork/java/javase/downloads/index.html， 进 
| 入 网 页 之 后 ， 单 击 左边 的 Java Platform( JDK ) 10 按钮 ， 如 图 19.1 所 示 。 


BB | © Shp ww orade. com/technetwork/java/javase/dow = © | Java se - Downionds 1 0.. x | 他 六 设 


ORACLE 


Oracle Technology Network / Java ! Java SE / Downloads 


eve | Downionas |[ Docmerioton |[ Communiy |[ Teomowgies [am 


Java SE Downloads 


| 
名 Java 


Java Platiomm (JDK) 10 NetBeans with JDK 8 


Java Platform, Standard Edition 


图 19.1 下 载 Java Platform (JDK) 


| 第 2 步 , 进入 下 载 页 面 之 后 ， 先 勾 选 Accept License Agreement 单 选 按钮 。 再 根据 本 地 操作 系统 单 击 要 
| 下 载 的 版 本 。 例 如 ， 笔 者 计算 机 为 64 位 Windows 系统 ， 就 单 击 jdk-10.0.1_ windows-x64_bin.exe 下 载 文件 ， 
| 如 图 19.2 所 示 。 

| 


"498。 


第 19 章 发 市 网 页 


SE Development Kit 10.0. 
You must accept the Oracle Binary Code License Agreement for Java SE to download this 


©O Accept License Agreement 图 Decline License Agreement 
Product / File Description File Size 
Linux 


Linux 


Download 
305 97 MB_ 训 jdlc10 01 Inmupex64 SS 


图 19.2 设置 下 载 版 本 


第 3 步 ， 只 需要 按照 提示 步骤 操作 就 可 以 完成 安装 。 安 装 时 请 留意 安装 路 径 ， 默 认 路 径 是 C: \ Program | 
Files\Java\jdkl.8.0-20\, 

第 4 步 ，Java JDK 安装 完成 后 ， 还 必须 在 系统 环境 变量 中 指定 JDK 路 径 。 由 于 其 他 两 项 工具 Android 
SDK 和 Apache Ant 也 必须 设置 变量 ， 等 到 3 项 工具 都 安装 完成 之 后 ， 一 次 设置 好 变量 就 可 以 了 。 有 关 变 量 
的 设置 方式 稍 后 将 进行 说 明 。 


19.2.2 安装 Android SDK 


Android SDK 的 下 载 地 址 为 http: //developer.android.com/sdk/index.html。 具 体 安装 步骤 如 下 。 

第 1 步 , 进入 网 页 之 后 ， 单 击 VIEW ALL DOWNLOADS AND SIZES 链接 ， 再 单 击 installer I24.4.1- 
windows.exe 下 载 并 安装 。 

第 2 步 ， 安 装 时 请 注意 安装 路 径 ， 默 认 安装 在 C: \Program Files ( x86 ) \Android\android-sdk。 安 装 完成 
之 后 ， 默认 会 打开 SDK Manager。 也 可 以 在 android-sdk 文件 夹 中 找到 SDK Manager.exe 文件 。 

第 3 步 ， 弹出 Android SDK Manager 对 话 框 之 后 ,会 看 到 Android SDK Tools、Android SDK Platform- 
tools、Android SDK Build-tools 复 选 框 已 被 勾 选 ， 这 些 项 目 是 默认 安装 的 。 如 果 还 想 安装 其 他 版 本 项 目 ， 可 
以 一 起 勾 选 之 后 再 单 击 Install 13 packages 按钮 ， 如 图 19.3 所 示 。 注 意 ，13 是 一 个 动态 数字 ， 勾 选 的 项 目 不 
同 ， 该 值 也 会 随时 变化 。 


Packages Tools 
SDK Path: C\Program Files (x86)\Android\android-sdk 


Apl Rev Status A 


2441 世 Update available: rev. 25.2.5 | 
installed 


Show: 回 Updates/New [VlInstalled Select New or Updates Install 13 packages- 
口 obsolete Deseled Al Delete 1 package.. 


Om 


Done loading pacdkages. 


图 19.3 安装 Android SDK 
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第 4 步 ， 接 着 会 


出 现 选择 的 项 目 ， 


.7s 各 动 Wt 开 必 以 入 站 到 交通 ( 微 课 精 编 版 ) 


让 


Packages 


A Android SDK License 
f Mndrold SDK Tool, revision 25. 
VY Android SDK Platiorm-tocls, revis| 
¥ Android SDK Build-tools, revision 
We SDK Platform Android 9, APIL28 m 
V Google USB Driver, revision 11 
Android SDK Preview License 
Me androd TV Intel 86 Aiom Systarr| 
Mk Intel x86 Atom 54 System Image, 
~ md x86 Atom System Image, And 
wk Google Play Intel x85 Mlom 64 sy: 
你 Google pay Intel x86 Mlom Syster 
你 Google ApE Intel x85 Atom_54 Sy 


| 户 核对 安装 项 目 是 否 正 确 ， 如 图 19.4 所 示 。 
| 击 Accept License 单 选 按钮 ， 再 单 击 Install 按钮 ， 就 会 开始 安装 。 


Package Description & license 


Packages 

-Android SDK Tools, revidon 25.25 
~Android SDK Dlatform-tools, ravision 28 
-Android SDK Buld-tools. revison 28 

~ SDK Platform Android 9. AP 28. revision 4 
-Geogle USB Driver revison 11 


License 

Terms and Conditors 

Thisis the Android Software Development Kit license 
Agreement 


.Intreduction 
I The ndrod Sahwere Dovooprent Kersforrod to in We 


如 果 正 确 无 误 请 单 


你 Google APE Intelx85 Atom Systel 


人 Leense Agreemert as the -SDK and spacifically induding the 


Android system files packaged APIs and Google APIs add-ons) v 
Orceept DRaea copy oe dipbeard |Print @Accept Ucense 


I] Something depende on this package 


图 19.4 确认 要 安装 的 项 目 


| 第 5 步 ,安装 需要 一 点 时 间 ， 请 不 要 关闭 安装 中 的 对 话 框 ， 安 
| 表示 已 经 安装 完成 。 单 击 Close 按钮 将 对 话 框 关闭 ， 再 关闭 Android SDK Manager 对 


安装 完成 后 会 弹出 如 图 19.5 所 示 的 对 话 框 ， 
话 框 。 


| Android SDK Manager -°° 
| Packages Tools | 
| SDK Path: CAProgram Files (x86)\Android\android-sdk | 
| pa Android SDK Manager Log 日 


| 1 


The Android SDK and AVD Manager that you are currenty using has been 
updated. Ric recommended that you now cloce the manager window and 
re-open it. Hf you use Eclipse, Please run Help > Check for Updates to see ¥ 


the Android plug-in needs to be updated. 


图 

Unzipping Android SDK Tools revision 25.2.5 (99%) Close 

让 -mao sm ume Ee ravey TT 
Show: [VUpdates/New [VInstalled Select New or Updates Install 13 packages- | 
口 obsolete DeselectAll Delete 1 package.. | 
Om | 


Unzipping Android SDK Tools revision 25.2.5 (99%) 


图 19.5 安装 成 功 


19.2.3 安装 Apache Ant 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
Apache Ant 下 载 地 址 为 https: //ant.apache.org/bindownload.cgi。 进 
| bin.zip 链接 就 可 以 下 载 文件 。 

| 下 载 之 后 解压 缩 会 得 到 apache-ant1.10.3 文件 夹 ，Apache Ant 不 需要 安装 ， 


入 网 页 之 后 ， 单 击 apache-ant-1.10.3- 


只 要 将 antbat 所 在 的 路 
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ant-1.10.3 文件 夹 与 Android SDK 放 在 同一 个 文件 夹 下 ， 也 就 是 C: \Program Files( x86 ) \Android\。 


| 
| 
径 加 入 到 系统 的 Path 变量 中 ， 让 程序 在 运行 时 能 够 找到 所 需 的 文件 即 可 。 为 了 方便 管理 ， 笔 者 将 apache- | 
| 
| 
| 


19.2.4 设置 用 户 变 量 


Java JDK、Android SDK 和 Apache Ant 安装 完成 之 后 ， 必 须 在 系统 环境 变量 中 指定 工具 的 路 径 。 具 体 


安装 步骤 如 下 。 


第 1 步 ， 在 “控制 面板 ”中 找到 “系统 ”功能 项 ， 单 击 “ 高 级 系统 设置 ”按钮 ， 打开“ 
话 框 ， 再 单 击 “ 环 境 变量 ”按钮 ， 如 图 19.6 所 示 。 


第 2 步 ,在 “环境 变量 ”对 话 框 中 的 “8 的 用 户 变量 ” 单 击 “ 新 建 ”按钮 ， 如 图 19.7 所 示 。 


图 19.6 单 击 “ 环 境 变 量 ” 按 钮 


第 3 步 ， 打开 “新 建 用 户 变量 ”对 话 框 ， 在 “变量 名 ”文本 框 中 输入 JAVA_HOME， 在 “变量 值 ” 文 | 


“系统 属性 ”对 


| 


EAphp71 
USERPRORILE%6WppData\LocaNTemp 


CNProgram Files (<86)VavaNreT\binC\P.. 
Ephp 


~ 


-| | 六- MR(D) 


年 
Desiination=file 
CWindows\system32\cmd.exe 


COVRIE 
已 NO_HosLCH- NO 


靳 建 (W)- 


图 19.7 “环境 变量 ”对 话 框 


本 框 中 输入 JDK 安装 路 径 ， 再 单 击 “ 确 定 ” 按 钮 ， 如 图 19.8 所 示 。 
第 4 步 ， 接着， 设置 Android SDK 的 用 户 变量 。 在 用 户 变量 区 单 击 “新 建 ” 按 钮 ， 打 开 “ .新 建 用 户 查 | 
量 ”对 话 框 ， 在 “变量 名 ”文本 框 中 输入 ANDROID_SDK， 在 “变量 值 ”文本 框 中 输入 Android SDK 安装 | 


路 径 ， 再 单 击 “ 确 定 ” 按 钮 ， 如 图 19.9 所 示 。 


JAvAHOME 


Cprogram FlesVavaVdk1001 


图 19.8 新建 环境 变量 


图 19.9 


[ANDROID_SDK 


Program Files (6) Android\android-sdk 


设置 ANDROID SDK 环境 变量 


第 5 步 ， 接着, 设置 Apache Ant 的 用 户 变量 ， 同 样 在 用 户 变量 区 单 击 “ 新 建 ”按钮 ， 打 开 “ 新 建 用 户 | 
变量 ”对 话 框 ， 在 “变量 名 ”文本 框 中 输入 ANT_ HOME, 在 “变量 值 ”文本 框 中 输入 Apache Ant 的 存放 | 


.501。 


2 


| 第 6 步 ， 接 着 必须 设置 系统 变量 区 中 Path 变量 的 变量 值 。 注 意 系统 变量 区 有 没有 Path 变量 ， 如 图 
| 19.11 所 示 。 如 果 没 有 Path 变量 ， 则 单 击 “新 建 ” 按 钮 ， 新 建 Path 变量 。 如 果 已 经 存在 Path 变量 ， 则 单 击 


CNProgram Files kagVavarcTvbin CA 
usERPRORILE96WPPData\LocalvTemp 
USERPRORLE%WPPData\LocaNTemp 


基建 (N)~ 和 大 (9) MS(D) 


值 
JAVA_HOME CAprogram FilesVavaydk-100.1 
NUMBER OF PR 8 
OS Windows NT 


ANTJHOMH 


ram Files (x86\Android\apache-ant-1.103 


图 19.10 设置 ANDROID SDK 环境 变量 图 19.11 Path 变量 


| 第 7 步 ,在 “变量 名 ”文本 框 中 输入 Path， 在 “变量 值 ”文本 框 中 输入 如 下 4 个 路 径 ， 每 个 路 径 变量 
| 之 间 以 分 号 ( ; ) 分 隔 。 

| 名 %IAVA HOME%\bin\ 

| 名 %ANT HOME%\bin\ 

| 加 %ANDROID SDK%\tools\ 

| 回 %ANDROID SDK%\platform-tools\ 

”第 8 步 , 输入 完成 后 的 界面 如 图 19.12 所 示 ， 单 击 “ 确 定 ”按钮 完成 设置 。 

| %IAVA HOME%\bin\; %ANT HOME%\bin\; %ANDROID SDK%\tools\; %ANDROID SDK%\platform- 
| 


path 


‘ols\ HANDROID SDK%é\platform- ocls\; 


| 
| 
| 
| 
| 
| 
| 
| 
| 图 19.12 设置 Path 变量 
| 

| 


| 0 注意 : 如 果 是 编辑 原来 的 Path 变量， 别 忘 了 新 变量 与 原来 的 变量 之 间 同 样 要 以 分 号 ( ; ) 分 隔 。 


19.2.5 测试 工具 


| 安装 必 备 工具 之 后 ， 用户 可 以 在 “命令 提示 符 ” 窗 口 ( 简称 CMD 窗口 ), 测试 工具 是 否 安装 成 功 。 


oD 
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sd 


第 1 步 ， 右 击 桌 面 左下 角 的 “开始 ”图 标 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 命 令 提 示 符 ”命令 ， 就 会 打 | 
开 CMD 窗口 。 | 
第 2 步 ， 输入 下 面 的 命令 ,测试 Java JDK 是 否 安 装 成 功 。 如 果 安 装 成 功 会 显示 版 本 信息 ， 


女 衣 
所 示 。 如 果 安 装 失败 ， 则 会 显示 “不 是 内 部 或 外 部 命令 


如 图 19.13 | 
命令 ， 也 不 是 可 运行 的 程序 或 批 处 理 文件 ”。 | 


> java -version 


nt 18.3 Cbuild 19.9.1+18> 


r UM 18.3 《build 19.9.1+*19。mixed node> 


图 19.13 测试 JAVA JDK 

第 3 步 ,输入 下 面 的 命令 , 测试 Android SDK 是 否 安装 成 功 

> adb version 

第 4 步 , 输入 下 面 的 命令 ,测试 Apache Ant 是 否 安 装 成 功 

> ant -version 

执行 上 述 命 令 后 ， 如 果 找 不 到 命令 ， 
量 的 设置 是 否 有 错误 或 遗漏 。 可 以 直接 复制 
分 号 ( ; ) 分 隔 


查 用 户 变 | 
前 面 加 上 | 


安 


的 原因 大 多 是 为 变量 设置 的 路 径 不 正确 ， 请 再 次 检 
装 路 径 到 系统 变量 和 用 户 变量 的 Path 值 后 面 ， 


19.2.6 ”通过 npm 安装 Cordova 


下 面 介 绍 如 何 通 过 npm 安装 Cordova， 有 具体 操作 步 又 如 下 | 

第 1 步 ， 安装 NodeJS， 下 载 地 址 为 http://nodejs.org/。 进 入 网 页 之 后 ， 下 载 并 安装 Node.JS， 如 图 19.14 | 
所 示 。 建 议 下 载 左 侧 的 LTS 版 本 ,推荐 大 部 分 用 户 使 用 

第 2 步 , Node.JS 安装 完成 之 后 ， 就 可 以 使 用 npm 命令 安装 Cordova 了 ， 由 于 命令 都 是 在 命令 行 
(Command Line ) 输入 并 执行 的 ， 所 以 要 先 打开 CMD 窗口 。 为 了 避免 安装 出 现 错误 ， 建 议 以 管理 员 身 份 打 | 
开 CMD 窗口 

第 3 步 ， 右 击 桌 面 左 下 角 的 “开始 ”图 标 ， 在 弹出 的 快捷 
就 会 打开 CMD 窗口 ， 如 图 19.15 所 示 

第 4 步 ,在 CMD 窗口 输入 下 列 语法 ,安装 Cordova。 运 行 如 图 19.16 所 示 。 


npm install -g cordova 


， 选 择 “ 命 令 提 示 符 ( 管理 员 )” 命 令 ， 
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HowE | apour | powmoms | pocs | crriwowen | stanm | ms Man 


Nodejs® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 


设备 管理 夺 (M) 
碳 生 管理 (IO 
Important June 2018 security upgrades now available 计算 机 管理 (G) 
命令 提示 符 (C) 
Download for Windows (x64) 命令 提示 符 (管理 员 )(A) 下 
任务 管理 黑 () 
1.3LTS 10.4.1 Current sR(P) 
Recommended For Most Users Latest features 文才 大理 蝇 人 有) 
Orher Downleads | Changelog | APIDocs。 Orher Downloads | Changeiog | AP Does 搜索 (S) 
Orhave a look at the Long Term Support (LTS) schedule. 运行 R) 
i(D) 
图 19.14 下 载 并 安装 Node.JS 图 19.15 选择 “命令 提示 符 (管理 员 ”命令 


npm install -g cordo' 
TE] A 
detail: 


图 19.16 安装 Cordova 


Node.JS 安装 完成 时 会 自动 增加 环境 变量 。 如 果 上 述 命 令 无 法 执行 ， 请 检查 用 户 变 量 或 系统 变量 的 Path 
变量 是 否 已 经 设置 好 正确 路 径 ， 默 认为 C: \Program Filesmodejs\ 


19.2.7 设置 Android 模拟 器 


Android 模拟 器 ( Android Virtual Device ) 用 来 模拟 移动 设备 ， 大 部 分 移动 设备 的 功能 都 可 以 模拟 操作 
第 1 步 , 在 android-sdk 文件 夹 中 找到 AVD Managerexe 文件 

第 2 步 ， 单 击 并 运行 ， 稍 等 一 下 会 显示 如 图 19.17 所 示 的 对 话 框 ， 单 击 Create 按钮 

第 3 步 ， 在 出 现 如 图 19.18 所 示 的 对 话 框 后 ,设置 模拟 设备 所 需 的 软 硬 件 规格 ,请 参考 下 面 的 说 明 
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网 网 辐 


国 罗网 加 


Tools 


Android Virtual Devices [Devics Definiions]| 


Uist of existing Andrcid Virtual Devices [ocated at CNUsersVivandroidyavd 
AVD Name Target Name Piatfo—. APt Le-. CPU/ABL 
二 No AVD aveloble = = 


A A repairable Ardroid Virtual Device X An Android Virtual Device that faiied to load. Click ‘Details’ to see 


图 19.17 Android Virtual Device (AVD ) Manager 


| 

| 

| 

| 

| 

testt | 
| 

Nexus 6 (5.96" 1440 x 2560: 560dpi) | 
| 

| 

| 

| 

| 


Android 9 - APLLevel 28 


CPUAABE No system imeges installed for this target 
Keyboard: 回 Hardware keyboard present 
Skin: HVGA 


Frent Camora: [Wobcamo 


Back Camera [Webcamo 


Memory Options:& RAM: 


Intornal storege [200 


SD Card: 


Size 
Ofile: 


Emulation Options: 口 Snapshot DUseHostGPU 


图 19.18 设置 模拟 设备 


AVD Name: 自 定义 模拟 器 的 名 称 ， 便 于 识别 。 
Device: 选择 想 要 模拟 的 设备 。 

Target: 模拟 器 的 Android 操作 系统 版 本 。 这 里 会 显示 SDK Manager 已 安装 的 版 本 ， 如 果 找 不 到 想 | 
要 的 版 本 ， 只 需 打 开 SDK Manager 并 下 载 之 后 ， 再 进行 设置 就 可 以 了 。 
CPU/ABI: 处 理 器 规格 。 

Keyboard: 是 否 显示 键盘 。 

Skin: 设置 模拟 设备 的 屏幕 分 辩 率 。 | 
Front Camera: 模拟 前 镜头 照相 功能 ， 设 置 为 None 表示 不 具备 前 镜头 照相 功能 ， 还 有 Emulated ( 虚 | 
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拟 )、Webcam ( 取 用 计算 机 的 摄像 头 ， 当 然 计算 机 必须 安装 了 摄像 头 )。 

Back Camera: 模拟 后 镜头 照相 功能 ， 设 置 为 None 表示 不 具有 后 镜头 照相 功能 。 

Memory Options: RAM 用 于 设置 内 存 大 小 ，VM Heap 是 限制 APP 运行 时 分 配 的 内 存 最 大 值 。 

SD Card: 模拟 SD 存储 卡 ( SD Card )， 如 果 所 要 开发 的 程序 有 可 能 用 到 存储 卡 ， 可 以 输入 需要 的 


轿 图 加 


存储 卡 容量 。 
= 回 Snapshot: 是 否 要 存储 模拟 器 的 快照 ( Snapshot )， 如 果 存 储 快照 ， 那 么 下 次 打开 模拟 器 时 就 能 缩短 
| 打开 时 间 。 
| 
| 第 4 步 ,设置 完成 之 后 单 击 OK 按钮 ， 就 会 产生 一 个 Android 模拟 器 。 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 多 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


19.3 将 网 页 转换 成 Android APP 


相关 的 工具 安装 和 设置 完成 之 后 ， 就 可 以 在 “命令 提示 符 ” 窗 口中 使 用 命令 调用 Cordova 把 网 页 构 置 
成 APP 了。 
| Android 操作 系统 的 软件 安装 文件 必须 是 APK 文件 ， 也 就 是 Android 安装 包 ( Android Package ) 的 缩 
| 写 ， 只 要 将 APK 文件 加 入 Android 模拟 器 或 者 在 Android 移动 设备 中 运行 就 可 以 进行 安装 。 
利用 Cordova Command-line Interface ( CLI )， 只 需要 以 下 4 个 步骤 就 能 将 网 页 程序 包装 成 APK。 
第 1 步 ， 创 建 项 目 。 


cordova create hello com.example.hello HelloWorld 


上 述 命令 用 于 创建 名 为 HelloWorld 的 项 目 。 在 “命令 提示 符 ” 窗 口中 切换 到 要 放置 项 目的 文件 夹 ， 
Wi D: \test\， 再 执行 上 述 命 令 ， 就 会 创建 HelloWorld 项 目 ，D: \test\ 下 会 生成 HelloWorld 文件 夹 。 
在 cordova create 后 面 添 加 以 下 3 个 参数 。 
回 文件 夹 名 称 ( hello )， 
回 APPid ( com.example.hello ) 
回 APP 名称 ( Hello World ) 
除了 文件 夹 名 称 之 外 ， 其 他 两 个 参数 可 以 省 略 ， 其 中 第 二 个 参数 App id 名 称 是 自 定义 的 ， 其 格式 类 似 
于 Java 的 package name， 最 少 两 层 。 由 于 APP id 在 同一 个 手机 中 或 Google Play 商店 都 不 能 重复 ， 因 此 大 
多 数 会 用 到 3 层 ， 如 com.example hell， 定 义 了 3 层 的 id 名 称 。 
创建 好 的 项 目下 共有 5 个 文件 夹 ， 分 别 是 .hooks 、merges 、platforms 、plugins 以 及 www 文件 夹 。 其 中 
| www 就 是 网 页 程序 放置 的 文件 夹 。 
第 2 步 ， 添 加 Android 平台 。 
创建 了 项 目 之 后 ， 必 须 指定 使 用 的 平台 ， 如 Android 或 iOS。 首 先 必须 在 “命令 提示 符 ” 窗 口中 切换 到 
项 目 所 在 文件 夹 ( 切换 文件 夹 的 命令 为 “cd 文件 夹 名称 ”)， 输 入 下 列 语法 即 可 创建 Android 平台 


cordova platform add android 


第 3 步 , 导入 网 页 程序 。 
接着 ,就 可 以 将 制作 好 的 网 页 文件 ( 包含 HTML 文件 、 图 形 文件 等 所 有 相关 文件 ) 复制 到 www 文件 
| 夹 中 ， 首 页 文件 名 默认 为 index.html。 用 户 可 以 使 用 记事 本 之 类 的 文本 编辑 器 打开 项 目 文件 夹 中 的 config. 


xml 文件 ， 找 到 以 下 语句 ， 将 index.htm! 改 为 首页 文件 名 。 
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<content src="index.html"/> 


第 4 步 ,创建 APP。 
在 “命令 提示 符 ” 窗 口中 先 切换 到 项 目 所 在 文件 夹 ( 切换 文件 夹 的 命令 为 “cd 文件 夹 名 称 ” )， 执行 下 | 
面 的 命令 创建 APP， 并 在 模拟 器 中 运行 APP。 = 


cordova run android 


| 
上 述 程序 语句 包含 “创建 APP” 和 “模拟 器 预览 ”两 个 操作 。 还 可 以 分 开 运 行 ， 如 果 只 想 创建 APP， 

不 想 从 模拟 器 预览 的 话 ， 可 以 只 执行 下 列 命令 。 
cordova build 

| 

| 

| 

| 


JVote 


运行 完成 之 后 ， 在 项 目 文件 夹 下 的 platforms/android/ant-build 文件 夹 中 就 可 以 找到 “APP 名 称 -debug. 
apk” 文 件 ， 例 如 ，HelloWorld-debug.apk 文件 ， 将 它 放 到 移动 设备 运行 就 可 以 进行 安装 了 。 

如 果 已 经 创建 APP 之 后 想 修改 项 目 名 称 和 APK 文件 名 ， 可 以 打开 项 目 文件 夹 下 platformms/android 文件 
夹 下 的 build.xml 文件 ， 以 及 www 文件 夹 下 的 config xml 文件 进行 修改 。 

第 5 步 ， 将 platforms/android/ant-build/First-debug.apk 发 送 到 智能 手机 进行 安装 就 完成 了 。 当 APK 文件 | 
存放 在 智能 手机 中 运行 并 安装 之 后 ， 就 会 像 普通 的 原生 APP 一 样 ， 创 建 程序 图 标 ， 单 击 图 标 就 会 打开 程序 。 | 
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循序 渐进 ， 实 战 讲述 

297 个 应 用 实例 ，30 小 时 视频 讲解 ， 基 础 知识 一 核心 技术 一 高 级 应 用 一 项 目 实战 
海量 资源 ， 可 查 可 练 

实例 资源 库 © 模块 资源 库 @ 项 目 资源 库 
@ 测试 题库 面试 资源 库 @ PPT 课 件 
(以 《Java 从 入 门 到 精通 (第 5 版 )》 为 例 ) 


人 目 开 发 全 程 实录 | 


Java C 语 言 PHP 


项 目 开发 全 程 实录 项 目 开发 全 程 实录 


Visual ct+ 隐 ASP.NET 上 
项 目 开发 全 程 实录 项 目 开发 全 程 实录 项 目 开发 全 程 实录 


Java Web Visual Basic 重 C++ 
项 目 开发 全 程 实录 项 目 开发 全 实录 项 目 开发 全 程 实录 


@ 当前 流行 技术 +10 个 真实 软件 项 目 + 完整 开发 过 程 
@ 94 集 教学 微 视频 ， 手 机 扫 码 随时 随地 学 习 

@ 160 小 时 在 线 课程 ， 海 量 开发 资源 库 资源 

@ 项 目 开发 快 用 思维 导 图 

(以 《Java 项 目 开发 全 程 实录 (第 4 版 )》 为 例 ) 


